Question

我正在尝试使鼠标悬停在图像上时div会滚动，但只能滚动到目前为止。在某个地方，它只是不太正常工作

$(document).ready(function()
 {
    $('#test').bind('mouseenter', function() 
   {
    var self = $(this);
    var right = parseInt(self.style.left) || 200;               
    this.iid = setInterval(function() 
     {
         if (right <= 400)
         {                     
         right += 200;                         
         }
         else
         {
          right = 400;                         
         }
    self.style.left = right + "px";
     }, 525);
   }).bind('mouseleave', function()
           {
    this.iid && clearInterval(this.iid);
           });

 });

    #test {
        color:white;
        width: 400px; 
    height: 400px; 
    left: 200px; 
    background-color: #000; 
    position: absolute;
    }

    <div id="test">hover me please</div>

或小提琴： http://jsfiddle.net/qjxqC/1/

谢谢你的帮助

Answer 1

替换

var self = $(this);

通过

var self = this;

因为style是DOM对象的属性，而不是jQuery对象，但是你做了：

self.style.left = right + "px";

Answer 2

首先，不要将JavaScript属性（iid）附加到DOM引用（this） this.iid 。这将导致某些浏览器（IE）中的内存泄漏。我也建议递归超时。

我将使用setTimeout进行此操作。它提供了更多的控制权，可以进行限制检查，并且可以更轻松地在您的功这是你的代码重做了。

$(document).ready(function(){
    var timeout; // keep your timeout reference at a higher scope for example
    $('#test').bind({
        'mouseenter': function(){ 
            var self = $(this);
            var incrementScroll = function() {
                var left = parseInt(self.css("left"));
                if(left <= 400) {
                    self.css("left", "+=200");  // as of jQuery 1.6 you can do this
                    // self.css("left", left+200);
                    timeout = setTimeout(incrementScroll, 525);
                }
            }             
            incrementScroll();
        },
        'mouseleave': function(){
            clearTimeout(timeout);
    }});
});

JavaScript通过鼠标悬停滚动对象

2 个答案: