Question

有没有更好的方法来编写以下内容？

$(function(){      
     $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow")  
     $('.start-here-notice').animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000);           
});

它工作正常，但我认为可能有更有效的方法来编写它。如果是这样，我可能会再动画几次。

仍然在这里学习，任何帮助将不胜感激。

谢谢！

Answer 1

您可以通过链接来对对象调用任意数量的jQuery方法：

$(function(){      
    $('.start-here-notice')
        .fadeIn(1000)
        .animate({"left":"-155px"}, "slow")  
        .animate({"left":"-165px"}, "slow")
        .delay(5000)
        .fadeOut(1000);           
});

按ID访问元素比按类访问元素要快一些。（在这种情况下，差异是微不足道的，因为你只做了一次。）
如果您要再次使用相同的元素，可以将$('.start-here-notice')的结果存储在变量中，这样您只需要查找一次。（同样，在这种情况下，性能提升是微不足道的。当你一次多次使用jQuery对象时，你会开始看到存储jQuery对象的好处，比如处理大量元素，或者频繁地，就像在触发的事件处理程序中一样反复。）

Answer 2

立即跳出来的唯一一件事就是将你的jquery查找设置为一个变量。

var startHereNotice = $('.start-here-notice');
startHereNotice.fadeIn(1000)...

Answer 3

此

$(function(){      
    $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow", function(){
        $(this).animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000);
    });
});

想到了......然后，它可能无关紧要。

Answer 4

您可以在同一个动画调用

上设置不透明度动画

$('.start-here-notice').animate({"left":"-155px", "opacity":1}, "slow")
$('.start-here-notice').animate({"left":"-155px", "opacity":0}, "slow")

但请注意，不透明度并未完全支持ie6和ie7。请改用alfa-filter

编辑：嗯，第二个电话，如果你想延迟de fadeOut，你的实现很好。延迟（）是要走的路。

Answer 5

使用find函数在jQuery中定义基于类的元素是最有效的，并且还包括html元素类型。

您目前有：

   $('.start-here-notice')

你应该考虑做这样的事情（假设.start-here-notice是DIV）

   $('#parent').find('div.start-here-notice')

要明确的是，如果页面上有少量到中等数量的DOM元素和有限的JavaScript，您几乎肯定不会注意到速度的提升。这只是最有效的方法。

淡出＆amp;带有动画位置 - 更好的方式来写这个？

5 个答案: