javascript - 我正在尝试使用 jquery 为我的 div 代码设置动画，但它显示未定义的函数 animateMargin()

Question

$(document).ready(function(){    
var top = 0;
                function animateMargin() {
                    if (top == -180) {
                        top = 0;
                    }
                    else {
                        top = top - 90;

                    }
                    $('.ticker').animate({'margin-top':top+'px'},500);

                }

                marginInterval = setInterval('animateMargin', 5000);
                $('.ticker').hover(function () {
                    clearInterval(marginInterval);
                },
                function () {
                    marginInterval = setInterval('animateMargin()', 5000);
                });    
});

html

<div class="ticker">
<h1>test 1</h1>
<h1>test 2</h1>
<h1>test 3</h1>
</div>

css

.ticker{ }

问题：

我试图为我的 div 顶部位置设置动画。0px 然后 -90px 然后 -180px 当 .ticker 类 margin-top 是 -180px 然后它又回到 0px 等等。上。帮帮我。

小提琴Here

Answer 1

它应该是：setInterval(animateMargin,5000)

代码：

$(document).ready(function () {
    var top = 0;

    function animateMargin() {
        if (top == -180) {
            top = 0;
        } else {
            top = top - 90;

        }
        $('.ticker').animate({
            'margin-top': top + 'px'
        }, 500);

    }

    marginInterval = setInterval(animateMargin, 5000);
    $('.ticker').hover(function () {
        clearInterval(marginInterval);
    },

    function () {
        marginInterval = setInterval(animateMargin, 5000);
    });
});

http://jsfiddle.net/PUkq8/

Answer 2

检查这个:)

      http://jsfiddle.net/KgZkg/

脚本：

   $(document).ready(function(){    
            var top = 0;
            function animateMargin() {
                if (top == -180)  {
                    top = 0;
                                  }
                else 
                                 {
                    top = top - 90;
                                 }
                $('.ticker').animate({'margin-top':top+'px'},500);
                                      }
                marginInterval = setInterval(animateMargin, 500);

                $('.ticker').mouseenter(function () {
                clearInterval(marginInterval);
                                                  });    

                 $('.ticker').mouseleave(function () {
                 marginInterval = setInterval(animateMargin, 500);
                                                     });    

          });

Answer 3

将函数和变量放在.ready()调用之外并正确设置间隔：

var top = 0;
var marginInterval;

$(document).ready(function(){
  marginInterval = setInterval(animateMargin, 5000);

  $('.ticker').hover(function () {
    clearInterval(marginInterval);
  });
});

function animateMargin() {
  if (top == -180) {
    top = 0;
  }
  else {
    top = top - 90;
  }
  $('.ticker').animate({'margin-top':top+'px'},500);
}

看到这个jsfiddle