jQuery隱藏顯示幻燈片懸停

我在實現的jQ功能中遇到了一些困難。問題在於幻燈片動畫在某些嘗試中隱藏/顯示多次。我希望它在懸停元素後僅顯示一次。所有工作正常，但有時在鼠標懸停元素時會褪色幾次，所以如果您移動鼠標，但仍然懸停，則不應該發生。我希望每次徘徊時它都會消失，但每次懸停時它只應該動畫一次，但有時每次懸停時會多次消失。嘗試在懸停時在標題和內容之間移動鼠標。jQuery隱藏顯示幻燈片懸停

$(document).ready(function() { 

$('.latest_module').hover(function(){ 

    var front = $(this).children('.cb-article-meta'); 
    var back = $(this).children('.cb-article-meta-hover'); 
    var backh2 = $(this).children('.cb-article-meta-hover').children('h2'); 
    var backp = $(this).children('.cb-article-meta-hover').children('p'); 
    var img = $(this).children('.cb-grid-img'); 
    $(front).css('display','none'); 
    $(back).css('display','block'); 
    $(img).addClass('latest_module_hover'); 
    $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px'); 
    $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px'); 

},function(){ 

    var front = $(this).children('.cb-article-meta'); 
    var back = $(this).children('.cb-article-meta-hover'); 
    var img = $(this).children('.cb-grid-img'); 
    $(front).css('display','block'); 
    $(back).css('display','none'); 
    $(img).removeClass('latest_module_hover'); 

});

}）;

Testing on jsfiddle

感謝，

來源

2015-08-03 Adam

你的小提琴不工作。 – Pratik

對不起，您必須從重定向鏈接中移除％20http //發生了一些錯誤的轉換 – Adam

只需添加一個class到滑動element，然後從下一次檢查，如果有class已經若是沒有做任何事情像一個下面：

DEMO

$(document).ready(function() { 
    $('.latest_module').hover(function(){ 
     if(!$(this).hasClass('hoverDone')) //check if it has class and if no then 
     { 
      $(this).addClass('hoverDone'); //add class once hover done 
      var front = $(this).children('.cb-article-meta'); 
      var back = $(this).children('.cb-article-meta-hover'); 
      var backh2 = $(this).children('.cb-article-meta-hover').children('h2'); 
      var backp = $(this).children('.cb-article-meta-hover').children('p'); 
      var img = $(this).children('.cb-grid-img'); 
      $(front).css('display','none'); 
      $(back).css('display','block'); 
      $(img).addClass('latest_module_hover'); 
      $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px'); 
      $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px'); 
     } 
    },function(){ 
     var front = $(this).children('.cb-article-meta'); 
     var back = $(this).children('.cb-article-meta-hover'); 
     var img = $(this).children('.cb-grid-img'); 
     $(front).css('display','block'); 
     $(back).css('display','none'); 
     $(img).removeClass('latest_module_hover'); 
    }); 
});

來源

2015-08-03 13:24:44

抱歉，這不是我要找的，我只是添加了額外的解釋。在我的例子中，所有的工作都很好，但是當你徘徊的時候，有時會消失更多，例如，如果你移動鼠標，它很難重現，但有時會發生 – Adam

@亞當它很難重現你的問題哥們！ –

是的，我知道，請嘗試在新聞4標題和下面的內容之間移動鼠標，嘗試將鼠標懸停幾次並移動到此區域 – Adam

如果你的問題是，你只需要盤旋運行在第一時間你可以取消綁定它時，它與這個$(this).unbind('mouseenter mouseleave')

$(document).ready(function() { 

    $('.latest_module').hover(function(){ 
     $(this).unbind('mouseenter mouseleave') 
     ...

http://jsfiddle.net/bgsx23nc/12/

編輯進入： 或者只在建議的Guruprasad Rao離開

... 
$(img).removeClass('latest_module_hover'); 
     $(this).unbind('mouseenter mouseleave') 

    }); 

});

http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/

來源

2015-08-03 13:25:01 JSantos

好的解決方法，但我建議在'mouseleave'上保留'$（this）.unbind（'mouseenter mouseleave'）'，因爲OP可能希望隱藏相同的內容！ +1雖然！ –

謝謝。你能否詳細說明你的評論？沒有完全明白你的意思。 – JSantos

喜歡看這個** [demo]（http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/）**，一旦'mouseout'那個特定的隱藏事件必須發生，因爲他已經爲'mouseleave'寫了一個！所以保持你的代碼行在第二部分！希望它現在明確.. –

jQuery隱藏顯示幻燈片懸停

回答

相關問題