jquery動畫重複幾次

我有一個動畫問題。這裏是我的代碼：jquery動畫重複幾次

<html> 
    <head> 
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
     <title>title</title> 
     <style> 
      div{ 
       width: 100px; 
       height: 100px; 
       background-color: green; 
       position:relative; 
       left: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <h1>Animation</h1> 
     <select id='text_1' type="text"> 
      <option>100</option> 
      <option>200</option> 
      <option>300</option> 
      <option>400</option> 
      <option>500</option> 
      <option>600</option> 
      <option>700</option> 
      <option>800</option> 
      <option>900</option> 
      <option>1000</option> 
     </select> 
     <button>Animate Div</button><br/><br/> 
     <div></div> 
     <script> 
      $(document).ready(function(){ 
       var number = 500; 
       $('#text_1').bind('change', function(){ 
        var number_2 = $('#text_1').val() != '' ? $('#text_1').val() : 500; 
        animation(number_2); 
       }); 
       animation(number); 
      }); 
      function animation(num){ 
       $('button').click(function(){ 
        $('div').animate({ 
         'left': num+'px', 
        }, 1000).animate({ 
         'left': '0px', 
        }, 1000);; 
       }); 
      } 
     </script> 
    </body> 
</html>

當我改變選擇選項（例如：300）並點擊按鈕，然後做兩個動畫。當我改變選擇選項，然後做一個樹動畫。什麼是錯的。請幫忙。

來源

2013-02-23 a_pajic

動畫此功能在更改事件內部和按鈕點擊事件時被調用兩次。 – 2013-02-23 04:03:41

這還不是最完美的解決方案，但如果你修改代碼看起來像這樣：

function animation(num) { 
    $('button').unbind('click'); //this removes the old click event 
    $('button').click(function(){ 
     .... 
    } 
}

那麼就應該解決您的問題。

來源

2013-02-23 04:05:07 lmortenson

@ user1920428確實需要下拉更改事件。 – 2013-02-23 04:12:10

從jQuery 1.7開始，.on（）和.off（）方法更適用於附加和刪除事件。 – Kolby 2013-02-23 04:31:45

嘗試

$(document).ready(function() 
{ 
    $('button').on('click',function() 
    { 
     var num = $('#text_1').val() != '' ? $('#text_1').val() : 500; 

     $('div').animate(
     { 
      'left': num+'px', 
     }, 1000).animate(
     { 
      'left': '0px', 
     }, 1000); 
    }); 

});

來源

2013-02-23 04:05:43

它可能沒有關係這一點，但你應該學習如何使用JavaScript調試器，類似Firebug，如果有可能給你一個線索。

如果你使用了一個調試器，並且你在「click」函數中設置了一個斷點，你會發現它多次被點擊，加起來就是你改變了選項下拉的次數。我猜這是因爲你的「animation（）」函數在每次被調用時都會將「new」函數綁定到「click」事件上，而不是刪除之前的函數，所以點擊按鈕會多次執行「click」函數。

來源

2013-02-23 04:06:29

這就是你可能是指

$(document).ready(function(){ 
    var number = 500; 
    $('button').click(function(){ 
     $('div').stop().animate({ 
      'left': number+'px', 
     }, 1000).animate({ 
      'left': '0px', 
     }, 1000); 
    }); 
    $('#text_1').bind('change', function(){ 
     number = $('#text_1').val() != '' ? $('#text_1').val() : 500; 
    }); 
});

否則你結合的Click事件的按鈕，每一次你動畫成爲問題。第一次點擊一次，所以它動畫一次，然後你動畫綁定再次點擊，所以它動畫兩次。還要注意stop（），它會導致div停止它正在做的事情並開始一個新的動畫，以防止多次點擊該按鈕的東西，並保持動畫幾秒鐘。

來源

2013-02-23 04:08:33 Ric

您正在綁定多次點擊事件。

它改成這樣：

  $('button').off('click').on('click', function(){ 
       $('div').animate({ 
        'left': num+'px', 
       }, 1000).animate({ 
        'left': '0px', 
       }, 1000);; 
      });

記住.off和.on更換.bind和.unbind 此外，這是出於性能的考慮，以連鎖功能，這樣更好。

來源

2013-02-23 04:29:39 Kolby

jquery動畫重複幾次

回答

相關問題