jQuery的火鼠標懸停事件逐一

我有以下的HTMLjQuery的火鼠標懸停事件逐一

<div class="large-4 columns"> 
    <div class="hover-tile"> 
     <div class="base"><img src="/images/hovtile/1.png" /></div> 
     <div class="cover"><img src="/images/hovtile/1-c.png" /></div> 
     <div class="hover"><img src="/images/hovtile/1-h.png" /></div> 
    </div> 
</div> 
<div class="large-4 columns"> 
    <div class="hover-tile"> 
     <div class="base"><img src="/images/hovtile/2.jpg" /></div> 
     <div class="cover"><img src="/images/hovtile/2-c.png" /></div> 
     <div class="hover"><img src="/images/hovtile/2-h.png" /></div> 
    </div> 
</div> 
<div class="large-4 columns"> 
    <div class="hover-tile"> 
     <div class="base"><img src="/images/hovtile/3.png" /></div> 
     <div class="cover"><img src="/images/hovtile/3-c.png" /></div> 
     <div class="hover"><img src="/images/hovtile/3-h.png" /></div> 
    </div> 
</div>

當用戶將鼠標懸停鼠標自己在圖像上它顯示另一個圖像。我想保留這個功能並添加一個自動的鼠標懸停事件。

我試過下面的代碼。它會同時觸發所有圖像的鼠標懸停。我希望它一個一個發生。它也應該返回到origianl狀態。我怎樣才能做到這一點？週期性地相同。

$(window).load(function(){ 
    var delay=0; 
    $('.base').each(function(i, obj) { 

     $(this).delay(delay).trigger("mouseover"); 
      delay += 500; 
    }); 
});

用戶動作懸停由

$('.hover-tile').hover(function(e){ 
    $(this).children('.hover').fadeIn(350); 
},function() { 
    $(this).children('.hover').fadeOut(250); 
});

來源

2014-10-01 Vidya

你確定這一切都在一次？ 500ms之間的延遲時間並不長。 – tymeJV 2014-10-01 00:25:35

使它成爲2000 stil它爲所有這一切做到了。 – Vidya 2014-10-01 00:28:19

@rrmo你是什麼意思顯示另一個圖像？所以它就像show 1.png，然後是1-c.png，然後是1-h.png，或者先顯示.hover-tile，然後是下一個，等等。 – 2014-10-01 00:32:13

JQuery's documentation實現指定該delay()功能只對利用的影響隊列事件的作用。沒有提及指定trigger()函數使用它。因此，所有的mouseover觸發器都會連續觸發，但不會等待500毫秒。

也許你可以做這樣的事情：

$(window).load(function(){ 
    var delay=0; 
    $('.base').each(function(i, obj) { 
     setTimeout(function(){ 
      $(obj).trigger('mouseover'); 
     }, delay); 
     delay += 500; 
    }); 
});

來源

2014-10-01 01:24:10

jQuery的火鼠標懸停事件逐一

回答

相關問題