Question

我有一个非常简单的div，当鼠标悬停在div上时，它使用JQuery淡入淡出。然后，当鼠标离开div时，它会淡出。

我的问题：淡入/淡出仅适用一次。当我将鼠标放在div上时，第二次它不会淡入。

出了什么问题？ JSFiddle：http://jsfiddle.net/hWyUn/3/

<div id="test" style="opacity: 0; width: 100px; height: 100px; background-color: red;">
</div>

$("#test").mouseenter(function()
                    {
                        $(this).css("opacity","1").fadeIn();
                    });

$("#test").mouseleave(function()
                    {
                        $(this).fadeOut();
                    });

Answer 1

使用fadeTo为我工作：

$("#test").mouseenter(function()
    {
        $(this).fadeTo("slow", 1);
    });

$("#test").mouseleave(function()
    {
        $(this).fadeTo("slow", 0);
    });

此处：http://jsfiddle.net/hWyUn/4/

Answer 2

请参阅jQuery文档。 fadeOut（）将在完成后将display属性设置为none。有效地将其从您的页面中删除。

http://api.jquery.com/fadeOut/

Answer 3

仅当元素被隐藏时才会起作用。您可以通过在$（元素）.fadeIn（）之前执行$（element）.css（'display'，'none'）将元素的显示设置为none。）

Answer 4

修正了你的问题。看看小提琴......

jsFiddle

Answer 5

你总是可以尝试使用jQuery的Animate来动画不透明度，而不是淡入淡出。可能是更短的代码。

设置不透明度的动画不会将显示设置为无，因此在淡出后你仍然可以摆弄它。

See my jsFiddle here

JQuery FadeIn / Out只能运行一次

5 个答案: