如何在jquery悬停期间跟踪位置？没有停止（）

我试图做一个项目的滑动列表来模仿netflix。看看他们的源代码，我已经找到了html标记，我想我已经明白了它的概念。我只需要能够在悬停期间追踪css的正确位置，并在悬停发生时通过另一个功能与其他功能做其他事情，而不是在悬停停止之后。如何在jquery悬停期间跟踪位置？没有停止（）

编辑：关于我试图实现的概念的更多细节。当“set”滑动时，我需要做两件事。

当一个“项目”滑落它需要从集合中移除，然后在设定的另一端重新插入，所以我需要一种方法来知道什么时候已经关闭屏幕画面任一方向。
我需要知道什么时候该组已滑动它的全长在任一方向，所以我可以重置其位置。

我能想到的唯一办法实现的无休止这种错觉滚动集是在集合滑动时跟踪css位置，我可以但我只需要知道如何插入.hover（）或其他方式来在不中断.hover（）的情况下跟踪它。

如果.hover不合适，我愿意接受其他方法的建议。

这里是我的代码

HTML：

<div id="slider"> 
      <div class="set"> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
       <div class="item"> 
        <img src="img/book.png"> 
       </div> 
      </div><!--end set--> 

      <div class="prevBtn"></div> 
      <div class="nextBtn"></div> 
     </div><!--end slider-->

slider.js：

(function() { 

    var Slider = { 

     init: function() { 
      var set = $('#slider .set'), 
      setLength = set.children().length * 190, 

      prev = $('.prevBtn'), 
      next = $('.nextBtn'); 
      self = this; 


      prev.hover(function() { 
       set 
        .css({right: set.position().right}) 
        .animate({right: '-' + setLength + 'px'}, 8000); 
      }, function() { 
       set.stop(); 
      }); 

      next.hover(function() { 
       set 
        .css({left: set.position().right}) 
        .animate({right: setLength + 'px'}, 8000); 
      }, function() { 
       set.stop(); 
      }); 
     } 
    } 


    Slider.init(); 
}());

谢谢

来源

2013-02-12 isimmons

我发现这个jquery watch plugin其回答跟踪左侧的问题位置。它是有限的，因为它只检查DomAttrModified或propertychange，否则运行一个计时器检查位置的间隔，我真的不想出于性能原因。看起来替代将是'变异观察者'，尽管它似乎还没有足够的浏览器支持。

但是后来我发现这个marquee plugin比试图跟踪位置和执行各种疯狂的数学，速度计算，确定方向和删除/附加图像的代码少。我要去的地方越来越复杂。所以我想我会用这个第二个解决方案。我可以通过用我的悬停函数替换它的setInterval来修改它，以根据哪个按钮悬停并运行/停止动画来改变方向。

我会使用这个，并为此特定目的重写，并在第二天或第二天发布。

来源

2013-02-14 02:07:05 isimmons

如何在jquery悬停期间跟踪位置？没有停止（）

回答

相关问题