Question

我正在尝试使用淡入/淡出jquery插件。昨天在这里的其他人的帮助下，我几乎完美地工作了。但是，当我第一次将鼠标悬停在div上时，淡入效果似乎不起作用。它在第二次和随后的悬停后工作。淡出似乎根本不起作用。

注意：当您将鼠标悬停在步骤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上你有所有 - 像这样的“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元素上时才设置属性width，height，...等，如果你改变它“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/

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/

Jquery淡入/淡出不首先悬停

2 个答案: