1

アニメーションについて以前に質問を投稿しましたがdiv、少し修正しようとしています。ページの読み込み時にdiv回転する があります。ホバリングすると停止したいです。

これがスクリプトです

rotate(); //the function which rotates the div 
$("#div2").hover(function() {
    $("#div2").stop();
});​

ここに私のJSページがあります

var obj = "div2";
var angle = 0;
var interval = 2323;
increment = 5;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    setTimeout(rotate, interval);
}​
4

3 に答える 3

3 
var elm = $("#div2"),
    angle = 0,
    interval = 2323,
    increment = 5,
    T = setInterval(rotate, interval);

elm.on({
    mouseenter: function () {
        clearInterval(T);
    },
    mouseleave: function() {
        T = setInterval(rotate, interval);
    }
});

function rotate() {
    elm.css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
}​

フィドル

于 2012-05-03T19:22:03.963 に答える
3

clearTimeout()メソッドを使用します。例として：

var obj = "div2";
var angle = 0;
var interval = 100;
var increment = 5;
var timer = null;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    timer = setTimeout(rotate, interval);
}

$("#div2").hover(function() {
    clearTimeout(timer);
}, function() {
    rotate();
});

rotate(); //the function which rotates the div​​

デモ: http://jsfiddle.net/Uf9qZ/

于 2012-05-03T19:07:20.167 に答える
1

独自のローテーションの実装を行っているため、管理も自分で処理する必要があるため、setTimeoutオブジェクトをキャッシュして、clearTimeout停止する必要があるときに使用します

于 2012-05-03T19:10:25.603 に答える