Jquery淡入淡出無法在第一次懸停

我試圖利用淡入淡出jQuery插件。昨天在這裏的其他人的幫助下，我幾乎完美地工作。但在我第一次把鼠標懸停在div上時，淡入效果似乎不起作用。它在第二次和隨後的盤旋之後起作用。而淡出似乎並不奏效。Jquery淡入淡出無法在第一次懸停

注：沒有什麼是應該，當你將鼠標懸停在步驟1中，但這種顏色的塊都應該當你將鼠標懸停在其他步驟淡入/淡出的情況發生。我更像是一位設計師，所以我不確定爲什麼動畫不會在第一次懸停時發生。這是做JS代碼的正確方法嗎？

$(document).ready(function() { 

    $("div.secure").hover(
     function() { 
      $("div.secure-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.secure-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

    $("div.cash").hover(
     function() { 
      $("div.steps-hover.cash-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.steps-hover.cash-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

    $("div.credit").hover(
     function() { 
      $("div.credit-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.credit-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

});

感謝您的任何幫助。

來源

2013-07-12 user2574250

在你的CSS你都-hover這樣的「div.cash:hover div.cash懸停」

div.default, div.cash:hover div.cash-hover, div.secure:hover div.secure-hover, div.credit:hover div.credit-hover{ 
    margin: 0; 
    padding: 0; 
    width: 960px; 
    text-align: center; 
    height: 180px; 
    position: absolute; 
    top: 234px; 
    display: block; 
    left: 0; 
    z-index: 3; 
    right: 0px; 
    cursor: auto; 
}

它設置屬性寬度，高度，。 ..etc只有當你有懸停在元素div.cash如果你改變它像這樣「div.cash-hover」

div.default, div.cash-hover,div.secure-hover, div.credit-hover{ 
    margin: 0; 
    padding: 0; 
    width: 960px; 
    text-align: center; 
    height: 180px; 
    position: absolute; 
    top: 234px; 
    display: block; 
    left: 0; 
    z-index: 3; 
    right: 0px; 
    cursor: auto; 
} 
//set all -hover to display none 
div.cash-hover, div.secure-hover, div.credit-hover { 
    display: none; 
}

你從開始設置div.cash-hover的屬性如此$（「div.cash」）。懸停可以動畫不透明http://jsfiddle.net/c6gRp/6/

來源

2013-07-12 17:51:55

您沒有爲div.online-hover指定任何內容。

$("div.online").hover(
function() { 
    $("div.online-hover").stop(true, true, true).fadeIn('slow'); 
}, 
function() { 
    $("div.online-hover").stop(true, true, true).fadeOut('slow'); 
});

http://jsfiddle.net/c6gRp/5/

來源

2013-07-12 16:40:33 prospector

感謝您的答覆。在線是第一步，所以它不應該做任何事情，當你把它懸停，所以這就是爲什麼我沒有把它包含在函數中。我去了你的更新JSfiddle，它仍然不會在第一次懸停時淡入，只有第二次和以後。 – user2574250

Jquery淡入淡出無法在第一次懸停

回答

相關問題