jQuery淡入/淡出在第一次懸停時不起作用

Question

我試圖利用淡入/淡出jQuery插件。 昨天在這里其他人的幫助下，我幾乎可以正常運行。 但是，當我將鼠標懸停在div上時，淡入效果似乎並不起作用。 它在第二次和之后的懸停之后工作。 而且淡出似乎根本不起作用。

http://jsfiddle.net/c6gRp/4/

注意：將鼠標懸停在步驟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');
        }
    );

});

謝謝你的幫助。

Answer 1

在您的CSS上，您將所有-hover都像這樣“ div.cash:hover div.cash-hover”

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;
}     

僅當您將元素div.cash更改為“ div.cash-hover”時，才設置屬性的width，height等。

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”）。hover可以為不透明度設置動畫http://jsfiddle.net/c6gRp/6/

Answer 2

您沒有為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/