Question

我有一些代码显示div时单击按钮时会显示一条消息。我希望div在几秒钟后消失。

我尝试在$(this).delay().hide(500);函数中添加.notify，但它不起作用。

$.fn.notify = function(settings_overwrite) {
    settings = {
        placement: "top",
        default_class: ".message",
        delay: 0
    };
    $.extend(settings, settings_overwrite);

    $(settings.default_class).each(function() { $(this).hide(); });

    $(this).show().css(settings.placement, -$(this).outerHeight());
    obj = $(this);

    if (settings.placement == "bottom") {
        setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
    }
    else {
        setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);      
    }
}

/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
    $('.message').on('click', (function() {
        $(this).fadeTo('slow', 0, function() {
            $(this).slideUp("slow", function() {
                $(this).remove();
            });
        });
    }));
});

$(document).ready(function() {
    if (document.location.href.indexOf('#notify_success') > -1) {
        $("#notify_autopop").notify({
            delay: 500
        });
    }
});

Answer 1

您可以编写代码来隐藏show()方法的第二个参数中的div，这是一个完整的回调。您需要hide()此回调中的元素。你可以在hide（）之前放置必要的超时。

Answer 2

您可以使用CSS3动画/转换而不是jquery的动画。并且您可以在某个时间之后使用setTimeout淡化消息。

请参阅以下代码

JS

$.fn.notify = function(message, settings_overwrite){
    var settings = {
        placement:"top-left",
        delay: 2000
    };

    $.extend(settings, settings_overwrite);
    var $this = $(this);
    $this.removeClass('bottom-left top-left');
    $this.text(message);
    $this.addClass(settings.placement + ' display');
    $this.on('click', function(){
         $this.removeClass('display');
    });
    setTimeout(function(){
        $this.removeClass('display');
    }, settings.delay);
}

$(document).ready(function ($) {

$('body').on('click', '.create-message', function(){
        $('.message').notify($('#msg').val(), {
            placement: $('#pos').val()
        });
    });
});

HTML

Position :
<select id="pos">
    <option value="top-left" selected>Top Left</option>
    <option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>


<div class="message"></div>

CSS

.message{
    position: fixed;
    width: 100px;
    height: 50px;
    background: green;
    color: white;
    padding: 3px;
    border-radius: 3px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.message.display {
    opacity: 1;
}

.message.top-left {
    top: 10px;
    right: 10px;
}

.message.bottom-left {
    bottom: 10px;
    right: 10px;
}

jsfiddle链接 - http://jsfiddle.net/jigardafda/ac5wyfo9/3/

Answer 3

您可以使用setTimeout功能您必须将divobj存储在变量中，然后在setTimeout函数

中使用它

  $('div').click(function(){
    //show the message
    var divObj = $(this);
    setTimeout(function(){
      divObj.hide();
    },3000);

    });

检查小提琴链接 https://jsfiddle.net/uujf8hmq/

Answer 4

通常我们不会在一个页面上使用$(document).ready(function() {....}();两次。

尝试编写代码以隐藏div功能后$(document).ready(function() {.....}()内的.show()。

您可以使用.hide()或setTimeout()功能隐藏div。

显示后隐藏div

4 个答案: