同时执行两个jquery函数

我只是用Javascript和jQuery获得我的轴承，而且我正在制作动画。同时执行两个jquery函数

基本上，发生了什么事是一个元素，＃左箭头。悬停时，箭头向左移动10px并增加不透明度。我正在使用jQuery的2D Transform插件来处理转换。

现在我的问题是，JavaScript只会一次执行一个。所以箭头会移动，然后增加不透明度。当这种方式发生时，效果会有所损失。

无论如何，我可以结合这些工作正常吗？

这是我有：

<script> 
    jQuery(document).ready(
     function() { 
      $('#left-arrow').hover(
       function() { 
        $(this).animate({translateX:-10}) 
        $(this).fadeTo('fast', 1); 

       }, 
       function() { 
        $(this).animate({translateX:0}); 
        $(this).fadeTo('fast', .8); 
       } 
      ) 
    }) 
    </script>

正如我所说的，我在这个相当新的，所以请具体说明，如果你有一个解决方案，我真的很感激！

来源

2010-07-06 Judson Collier

如果您将不透明度添加到对animate（）的调用中，它将与您的translateX属性同时为该属性设置动画效果。例如：

jQuery(document).ready(function() { 
    $('#left-arrow').hover(
     function() { 
      $(this).animate({translateX:-10, opacity: 1}); 
     }, 
     function() { 
      $(this).animate({translateX:0, opacity: 0}); 
     } 
    ); 

    $('#right-arrow').hover(
     function() { 
      $(this).animate({translateX:10, opacity: 1}); 
     }, 
     function() { 
      $(this).animate({translateX:0, opacity: 0}); 
     } 
    ); 
});

我已经将两个调用与document.ready（）组合成了一个调用。另外，如果你只是左右移动你的元素，而没有进行任何疯狂的旋转/缩放等，你可以避开元素的相对位置，只是动画了'左'属性。

来源

2010-07-06 20:29:21 Faisal

谢谢，这个作品很有魅力！剩下：;似乎为我需要的工作正常工作。 – 2010-07-06 20:38:59

如果由于某种原因您不想将Faisal提到的两种效果结合起来，那么jQuery文档将讨论关于同时动画 http://docs.jquery.com/Release:jQuery_1.2/Effects#Simultaneous_Animations。你可以在它的选项数组中传入animate（）队列：false标志。所以：

jQuery(document).ready(function() { 
     $("#left-arrow").hover(function() { 
       $(this).animate({translateX:10}, {queue: false}).animate({opacity: 1}, {queue: false}); 
      }, function() { 
       $(this).animate({translateX:0}, {queue: false}).animate({opacity:0}, {queue: false}); 
      } 
     ) 
    } 
}

希望这有助于。

来源

2010-07-06 20:42:00 Bacon

同时执行两个jquery函数

回答

相关问题