我怎样才能让一个函数等待，直到动画完成？ [英] How can I make a function wait until an animation completes?

问题描述

我用JQuery的一个小动画作品：表 #photos 包含9张照片，我想增加宽度和高度使用动画功能。但是，而如果用户移动鼠标到另一张照片，它会自动触发下一个动画，所以它是完全糊涂了动画正在运行。我该怎么办？我的code是：

  $（函数（）{
  $（＃照片TR TD IMG）。鼠标指向（函数（）{
    $（本）.animate（{宽度：1000像素，高度：512像素}，2000）
  }）;
  $（＃照片TR TD IMG），鼠标移开。（函数（）{
    $（本）.animate（{宽度：100像素，高度：50像素}，2000）
  }）;
}）;
 

解决方案

jQuery提供了回调的动画完成时。
然后，它可能是这样的，例如：

  VAR动画= FALSE;
$（函数（）{$（＃照片TR TD IMG）。鼠标悬停（
    功能（）
    {
    如果（！动画）
    $（本）.animate（{宽度：1000像素，高度：512像素}，2000，缓和，函数（）{动画= TRUE;}）;
    }）;    $（＃照片TR TD IMG）。鼠标移开（
    功能（）
    {
    $（本）.animate（{宽度：100像素，高度：50像素}，2000，缓解，函数（）{动画= FALSE;}）
    }）;
}）;
 

I have used JQuery for a small animation work: a table #photos contains 9 photos and I would like to increase the width and height using the animate function on mouseover. But while the animation is running if the user moves to mouse to another photo it automatically triggers the next animation, so it's totally confused. What should I do? My code is:

$(function(){
  $("#photos tr td img").mouseover(function(){
    $(this).animate({"width":"1000px","height":"512px"},2000)
  });
  $("#photos tr td img").mouseout(function(){
    $(this).animate({"width":"100px","height":"50px"},2000)
  });       
});

解决方案

JQuery offers callbacks when the animation is complete. Then it might look like this for example:

var animating = false;
$(function(){ $("#photos tr td img").mouseover(
    function()
    {
    	if(!animating)
    		$(this).animate({"width":"1000px","height":"512px"},2000, easing, function() { animating = true; });
    }); 

    $("#photos tr td img").mouseout(
    	function()
    	{
    		$(this).animate({"width":"100px","height":"50px"},2000, easing, function() { animating = false; }) 
    	});
});

这篇关于我怎样才能让一个函数等待，直到动画完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！