Question

我有一个带有三个图像初始化的精灵图像，我想在鼠标悬停图像时每秒更改图像位置

我尝试了什么：

  $(".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

Answer 2

您需要在悬停时使用setInterval，然后在鼠标移出时，您应该使用clearInterval清除de interval。

生活演示：http://jsfiddle.net/377Ja/

var myInterval

$(".miniPosterImg").hover(function() {
    myInterval= 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(myInterval) ;
});

Answer 3

由于您有精灵，我相信您想要更改的属性是背景位置

试试这个：

.miniPosterImg:hover{
    /*only doing animation for chrome, use other prefixes to replicate in other browser*/
    -webkit-animation: slideImage 1s;
    background:url(/*your url*/);
}

@-webkit-keyframes slideImage{
   0%{background-position: 0px 0px}
   50%{background-position: -120px 0px}
   100%{background-position: -240px 0px}       
}

每1秒悬停一次代码

3 个答案: