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动画重复几次

回答

相关问题