1

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

我试过的：

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

4

3 回答 3

2

我认为您的代码不断重复。所以添加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

工作 JSFIDDLE

于 2013-09-16T15:33:20.447 回答
1

既然你有一个精灵，我相信你想要改变的属性是背景位置

尝试这个：

.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}       
}
于 2013-09-16T15:45:11.600 回答
1

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

现场演示：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) ;
});
于 2013-09-16T15:31:54.523 回答