jQuery淡入和淡出循環

Question

我最近更新了我的舊JavaScript以與Jquery一起使用。

它執行以下操作：

當用戶將鼠標懸停在帶有一類content-fade的鏈接上時，除非用戶將鼠標停留在content-fade否則它將使具有相關id內容淡入，然后在設置的時間內淡出。

我需要再次更改腳本，並使其遍歷一組id即id1，id2，id3 ...等。 理想情況下，僅顯示具有單獨關聯ID的內容。 我剛剛開始使用JQuery，但不確定如何最好地實現這一點。 如果有人可以指出正確的方向，則下面的代碼將不勝感激。

  $(document).ready(function() {
        var hide = false;
        $(".content-fade").hover(function(){
            if (hide) clearTimeout(hide);
            $("#id").fadeIn();
        }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
        $("#id").hover(function(){
            if (hide) clearTimeout(hide);
       }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
 });

Answer 1

如果我正確理解您的要求，那么您就走對了。

• 通過將jQuery選擇器存儲在data屬性中來定義目標元素（ data-hover-target ）
• 在mouseenter （懸停）上，淡入目標元素。
• 離開mouseleave時，延遲淡出目標
• 清除 mouseenter上目標元素的動畫隊列 ，以防止fadeOut（如果未決）。 因此，如果用戶將光標從鏈接上移開，則立即將其再次移回-在開始延遲的fadOut之前-將取消fadout，並且目標元素將保持可見。

有關代碼，請參見下文，有關工作示例，請參見http://jsbin.com/uruzaw/11/ 。

$(function(){

  $('.content-fade').hover(
    // fadeIn on mouse
    function(event){
      var $this = $(this);
      var $target = $($this.data('hoverTarget'));
      $target.clearQueue().fadeIn(500);
    }, 

    // fadeOut on mouseout
    function(event){
      var $this = $(this);
      var $target = $($this.data('hoverTarget'));
      $target.delay(500).fadeOut(500);
    }
  );

});

編輯我想我誤解了您的要求。 如果希望在鏈接和內容本身都懸停時防止內容淡出，則以下內容就足夠了。 基本上就是您編寫的內容，但是使用jQuery動畫隊列和.delay()來代替setTimeout() 。 參見http://jsbin.com/uruzaw/13/

$(function(){

  var HOVER_DELAY = 1000;

  $('.content-fade').each(function(){
    var $this = $(this);
    var $target = $($this.data('hoverTarget'));

    var fadeTargetElem = function(){
      $target.delay(HOVER_DELAY).fadeOut(500);
    };

    // bind to mouseenter
    $this
      .mouseenter(function(event){
        $target.clearQueue().fadeIn(500);
      })
      // bind to mouseleave
      .mouseleave(function(event){
        fadeTargetElem();
      });

    // bind to mouseenter of target
    $target
      .mouseenter(function(event){
        $target.clearQueue();
      })
      // bind to mouseleave of target
      .mouseleave(function(event){
        fadeTargetElem();
      });
    });
});

Answer 2

如果您的ID已編號，那么簡單的for循環就可以解決問題。 問題是，您的“ id” 如何首先與他們的.content-fade對應物相關聯？ 該問題的答案將帶您找到解決方案。

如果每個.content-fade鏈接也都設置了一個id attr，那么您可以解析該鏈接並在附加mouseenter / mouseleave事件時使用它。

說：

<a class="content-fade" id="link-1">Link 1</a>
<a class="content-fade" id="link-2">Link 1</a>

然后，您可以這樣解析它：

var hide = false, id;
$(".content-fade").hover(function() {
    if (hide) clearTimeout(hide);
    id = this.id.split('-')[1];
    $("#id-" + id).fadeIn();
}, function() {
    id = this.id.split('-')[1];
    hide = setTimeout(function() {$("#id-" + id).fadeOut("slow");}, 250);
});

當然，這意味着必須管理所有不同的超時。

Answer 3

要在所有的這些ID的迭代，你需要使用一個類添加到所有這些因素，並采取行動，在每次迭代各

Answer 4

您可以將數據附加到每個類，以便當您將鼠標懸停在其上時知道應該顯示什么ID

<div class="content-fade" data-for="#1">hover for #1</div>
<div class="content-fade" data-for="#2">hover for #2</div>
<div class="content-fade" data-for="#3">hover for #3</div>

$(function(){
    $('.content-fade').bind('hover', function(){
        var idToShow = $(this).data('for');
        $(idToShow).fadeIn('slow').delay(1500).fadeOut('slow');
    });
});