1

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

$('.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);
4

2 回答 2

1

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

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

这个想法是回调函数在fadeTo完成时执行。

于 2012-03-12T01:22:23.187 回答
0

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 对象保存在内存中，而不是一直获取它。

于 2012-03-12T01:40:54.777 回答