Javascript/jquery动画

Question

我对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); 

Answer 1

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

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

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

Answer 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对象，而不是获取它所有的时间。