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

関数と変数を呼び出しの外に置き、.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を参照してください

Answer 3

これをチェックして：）

      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);
                                                     });    

          });