1

我正在尝试使用淡入/淡出 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');
        }
    );

});

谢谢你的帮助。

4

2 回答 2

2

在你的 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”进行更改 

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/

于 2013-07-12T17:51:55.730 回答
0

您没有为 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-12T16:40:33.457 回答