jquery淡入/淡出懸停問題 - 停止閃爍！

我正在使用此腳本在圖標上淡入淡出。jquery淡入/淡出懸停問題 - 停止閃爍！

我也想隱藏以前的形象，一旦頂部圖像完成衰落。

我遇到的問題是，當你將鼠標懸停在它似乎閃爍在消失之前。我需要閃爍停止！

以下是我的HTML和jQuery代碼。我試圖讓這個代碼有點普遍。

.link-container { 
    position: relative; 
    cursor: pointer; 
    float: left; 
} 
.title-hover { 
    background-position: 0 -106px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
    display: none; 
    z-index: 2; 

} 
.title { 
    background-position: 0 -63px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
} 

<div class="link-container"> 
    <div class="main-tile hover-init title"></div> 
    <div class="main-tile title-hover"></div> 
</div> 

$(function() { 
    $(".link-container").hover(function() { 
     $(".hover-init", this).next().stop(true, true).fadeIn(400); 
     $(".hover-init", this).hide(); 
    }, function() { 
     $(".hover-init", this).next().stop(true, true).fadeOut(400); 
     $(".hover-init", this).show(); 
    }); 
});

來源

2011-07-25 William George

你沒有發佈HTML，只是CSS。 –

這裏的jquery老是最新版本以及html。 Id喜歡淡化.next，然後隱藏hover-init。然後到相反的淡出。您建議的方法有效，但它並不隱藏懸停init，它只是將另一個.next淡出，這看起來不太好=/ –

您正在回答我的回答嗎？ – Cystack

的問題是，懸停交換機從一個DIV到另一個標題彈出。
所以，你需要嗅探你是什麼樣的div，並改變反應。，做你問

代碼如下所示：

$(".link-container div.main-tile").hover (fancyRollover); 

function fancyRollover (zEvent) { 
    var jThis   = $(this); 
    var bInInitDiv  = jThis.hasClass ('hover-init'); 
    if (bInInitDiv) { 
     var initDiv  = jThis; 
     var hoverDiv = jThis.next(); 
    } 
    else { 
     var initDiv  = jThis.prev(); 
     var hoverDiv = jThis; 
    } 

    if (zEvent.type == 'mouseenter') { 
     if (bInInitDiv) { 
      hoverDiv.stop (true, true).fadeIn (400, function() { 
       initDiv.hide(); 
      }); 
     } 
     else { 
      //--- Do nothing. 
     } 
    } 
    else { //-- zEvent.type == 'mouseleave' 
     if (bInInitDiv) { 
      //--- Do nothing. 
     } 
     else { 
      hoverDiv.stop (true, true).fadeOut (400); 
      initDiv.show(); 
     } 
    } 
}

See it in action at jsFiddle.

來源

2011-07-26 00:47:20

Brock im不太高級的Jquery所以請原諒我的困惑。我拿了你的一段代碼，並試圖將其應用到我的html，但它似乎沒有做任何事情...任何建議，爲什麼這可能是？ –

你的代碼與問題中的代碼和小提琴中的代碼有什麼不同？（小提示與問題相同，除了小CSS調整來顯示操作。）這個答案jQuery應該直接進入頁面，如問題中所述。你能鏈接到實際的頁面嗎？ –

我設法解決它，所以你的代碼工作，但現在我遇到了一個新問題，看看這個評論結束時的鏈接，並將鼠標懸停在「簡歷」鏈接上。圖標和文本應該一起淡入淡出，使用你的代碼，它們似乎被分開處理。即使是名稱上的懸停似乎也不平坦[LINK HERE]（http://www.norkenguitars.com/new） –

想要在淡入淡出完成後開始淡出，對不對？然後使它的淡入功能的回調：

$(".hover-init", this).next().stop(true, true).fadeIn(400, function() { 
    $(".hover-init", this).fadeOut(); 
});

編輯：

現在我看你想實現我甚至不知道你爲什麼要淡出的第一個div效果

。

http://jsfiddle.net/ARyjq/3/做

來源

2011-07-25 22:28:19 Cystack

所以fadeOut失敗？嘗試symply'$（this）.fadeOut（）'而不是'$（「.hover-init」，this）.fadeOut（）' – Cystack

它是否在顯示fadeout失敗時顯示錯誤？ – Cystack

與您的方法，它不會給出一個錯誤只是淡化一個圖像在另一個之上。用我在我的文章中的方法，它似乎隱藏圖像然後淡入，導致眨眼。我正在尋找一種淡入淡出一種形象的方式，然後隱藏另一種方式，沒有眨眼。所以沒有任何方法 –

jquery淡入/淡出懸停問題 - 停止閃爍！

回答

相關問題