动画执行后没有调用jQuery Animate回调?

时间:2012-05-31 01:03:17

标签: jquery jquery-animate infinite-carousel

我正在使用jQuery .animate()来创建一个无限的轮播。我之前使用过.animate()没有任何问题。但是,这次动画还没有完成。

这是一个非常简单的动画,将margin-left更改为不同的值。值发生了变化,对我而言,它看起来好像已经完成,但函数不会触发。

这是我的代码:

<script type="text/javascript">
  $("#scrollLeft").click(function(){
      $("#scrollContent").animate(
        {'margin-left':'-714px'},
        {queue:false, duration:500},
        function(){
            alert("finishedLeft");
      });
  });
  $("#scrollRight").click(function(){
      $("#scrollContent").animate(
        {'margin-left':'-1190px'},
        {queue:false, duration:500},
        function(){
            alert("finishedRight");
      });
  });
</script>

问题区域是页面底部的轮播。我正在逃离jquery-1.7.1.min.js

我想我的主要问题是,即使看起来事件已经完成,有什么可能阻止此功能被触发?

1 个答案:

答案 0 :(得分:6)

Watch your syntax.

http://jsfiddle.net/n1ck/HBCn5/

$("#scrollLeft").click(function() {
    $("#scrollContent").animate({
        'margin-left': '-714px', // don't close out the parameters with parentheses yet ...
        queue: false,            // continue adding the queue option (if needed)
        duration: 500            // and the duration option (if needed) and close after
    }, function() {
        alert("finishedLeft");
    });
});
$("#scrollRight").click(function() {
    $("#scrollContent").animate({
        'margin-left': '-1190px', // same as above
        queue: false,
        duration: 500
    }, function() {
        alert("finishedRight");
    });
});​    ​