同時執行兩個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函數

回答

相關問題