Question

 $('<div class="error"></div>').html('<h2>(click here to dismiss)</h2>').insertAfter($('#someid')).fadeIn('slow').animate({ opacity: 1.0 }, 1000).click(function() {
       $(this).fadeOut('slow', function() {
           $(this).remove()
       })
   });

有没有办法将其与：

结合起来

$('#someid').animate({opactiy: 1.0 } fadeOut('slow', function() {
            $(this).remove()
        });

换句话说要将它组合起来，所以当它们没有点击它时，它会在这么多秒后消失。

Answer 1

我不确定是否有一种很好的方法将所有这些链接在一起，所以它发生在一个命令中。但是，您可以在单独的行上使用setTimeout以在另一个语句中实现相同的效果。例如，在您的第一个声明之后：

setTimeout(function() {
    if ($('#someid').css('opacity') == 1.0) {
        // Fade out has not started yet
        $('#someid').animate({opactiy: 1.0 } fadeOut('slow', function() {
            $(this).remove()
        });
    }
}, 3000); // setTimeout counted in ms, not seconds

我同意将所有东西连在一起可能更优雅，但我不知道这样做的好方法。

作为旁注，您可以在Javascript中的方法名称之间拥有所需的空格，因此您可以将原始语句分成多行以获得更好的可读性，例如：

$('<div class="error"></div>')
    .html('<h2>(click here to dismiss)</h2>')
    .insertAfter($('#someid'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 1000)
    .click(function() {
   $(this).fadeOut('slow', function() {
       $(this).remove()
   })

}）;

但这是一个偏好问题。

fadeout手动（点击）自动（几秒钟后）

1 个答案: