Javascript/Jquery 动画答案

【问题标题】：Javascript/Jquery animationsJavascript/Jquery 动画
【发布时间】：2012-03-12 09:40:54
【问题描述】：

我对 javascript 和 jquery 库的工作方式有点困惑。例子。在单击事件中，我想让我的图像淡入淡出更改源然后淡入。我认为这应该可以工作。您执行一个代码，然后执行下一个代码。但它往往会切换然后执行代码。有人可以帮助我理解为什么会发生这种情况以及是否有任何解决方案。

$('.under_box').click(function(){
var main_source=$(this).attr("src");
$("#main_image").fadeTo(300,0);
$("#main_image").attr("src",main_source).queue();
$("#main_image").fadeTo(500,1);

【问题讨论】：

为什么要使用.queue()函数？

标签： jquery animation src fadeto

【解决方案1】：

这些函数往往是异步的，因为它们不会在下一行代码开始之前等待完成。您可以尝试使用这样的回调函数：

   $("#main_image").fadeTo(300,0, function(){
        $("#main_image").attr("src",main_source).queue();
        $("#main_image").fadeTo(500,1);
    });

想法是当fadeTo完成时回调函数执行。

【讨论】：

【解决方案2】：

JavaScrypt 众所周知是非阻塞的，因此在这种情况下，如果您想在某事之后等待执行某事，最好的方法是设置回调。

$(function(){
    var main_image = $("#main_image");
    $('.under_box').on('click', function(){
        var main_source=$(this).attr("src");
        main_image.fadeTo(300,0, function(){
            main_image.attr("src",main_source);
            main_image.fadeTo(500,1);
        });
    });
});

另外，请注意您应该减少跳转到 DOM 的次数，以这种方式保存

var $main_image = $("#main_image");

将 jquery 对象保存在内存中，而不是一直获取它。

【讨论】：