如何在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懸停期間跟蹤位置？沒有停止（）

回答

相關問題