jquery - 每 1 秒悬停一个代码

Question

我有一个包含三个图像初始化的 Sprite 图像，我想在鼠标悬停在图像上时每秒更改图像位置

我尝试过:

  $(".miniPosterImg").hover(function () {
      setInterval(function () {
          thismarginLeft = $(this).css("margin-left").replace(/[^0-9]/g, '');
          if (thismarginLeft < 360) {
              thismarginLeft = thismarginLeft - 120;
              //}else{
              //      thismarginLeft = 0;
          }
          $(this).css("margin-left", thismarginLeft + "px");
      }, 1000);
  });

http://jsfiddle.net/377Ja/4/

Answer 1

我认为你的代码不断重复。因此，在您的回调中添加clearInterval。

但是要小心，你需要使用如下所示的变量

var toggle;
$(".miniPosterImg").hover(function() {
    toggle = setInterval(function(){
        thismarginLeft = $(this).css("margin-left").replace(/[^0-9]/g,'');
        if(thismarginLeft < 360){
                thismarginLeft = thismarginLeft-120;
        //}else{
        //      thismarginLeft = 0;
        }
        $(this).css("margin-left", thismarginLeft + "px");
    },1000);}, 
    function(){
          clearInterval(toggle);
    }
});

您的评论更新:

最好有一个单独的方法来处理 setInterval 像这样

tToggle = function () {
    thismarginLeft = $('.miniPoster').css("marginLeft").replace(/[^0-9]/g,'');
     if(thismarginLeft < 360){
            thismarginLeft = thismarginLeft-120;        
    }
    $('.miniPoster').css("marginLeft", thismarginLeft + "px");
}

然后像这样使用

var toggle;
$(".miniPosterImg").hover(function () {
    toggle = setInterval(tToggle, 1000);
},
function () {
    clearInterval(toggle);
});

另外仅供引用:

$('.miniPoster').css("margin-left")  //WRONG
$('.miniPoster').css("marginLeft")  //CORRECT

Working JSFIDDLE