0

我对使用 JQuery 还很陌生，只是在玩。我试图让一个元素在单击按钮时淡入。如果用户再次单击按钮，而元素仍在淡入，我希望它再次开始隐藏/不可见。所以我首先停止所有动画stop(true)，然后隐藏元素并让它淡入。

我无法让它工作。似乎第二次淡入是从元素当时的不透明度开始的，然后从那里淡入。我也尝试过使用css("opacity", 0)，hide()但随后该元素将其不透明度设置为 0，并且 fadeIn 似乎不再起作用。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"> </script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    $("span").stop(true).hide().fadeIn(3000);
                });
            })
        </script>
        <button>FadeIn</button> <span>Hello, world!</span>
    </body>
</html>

使用 JQuery 1.7.2 并在 Chrome 和 IE 中尝试过。

我究竟做错了什么？

4

4 回答 4

3

.stop(true)只是停止动画并将其留在原处。如果您在 a 的中间fade()，那么该对象将在淡入淡出中间留下一个不透明度值。

如果您想停止动画并将不透明度置于已知状态，那么您可能只想将其设置为您希望它开始的位置。 .hide()设置display: none- 它不会弄乱不透明度。

因此，如果您在执行fadeOut()时处于 a 的中间.stop(true)，那么您可以这样做.stop(true, true)，这会将当前动画跳到结尾，从而为您提供一个很好的起点fadeIn()。

您还可以在原处停止动画，然后从那里淡出到完全不透明：

.stop(true).fadeTo(3000, 1);

当您中断上一个动画时，这通常是您想要做的。

于 2012-04-22T19:32:44.323 回答
2

稍等true一下"jump to the end"：

.stop(true,true)

http://jsfiddle.net/V8wRE/2/

于 2012-04-22T19:23:25.897 回答
0

问题是，当您停止跨度并且动画未完成时，该fadeIn功能会将您的跨度淡化为最后一个已知的不透明度（由于动画未完成，因此不是 1），因此您可以将第二个 true 标志传递给stopEsailija 所说的功能，或者您可以使用fadeTo代替fadeIn：

 $("span").stop(true).hide().fadeTo(3000,1);

在这里工作演示：http: //jsfiddle.net/V8wRE/3/

于 2012-04-22T19:28:45.527 回答
0

我今天早些时候遇到了这个问题，但是使用 fadeTo 而不是 fadeIn。我刚刚使用了这段代码

$(news_controls).hover(function(){
        $(this).stop().fadeTo("fast", 1);
},function(){
        $(this).stop().fadeTo("slow", 0.4);
});

但是，正如您所说的那样，需要两个真正的标志才能跳转到末尾，因此您的代码应该如下所示

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"> </script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    $("span").stop(true, true).hide().fadeIn(3000);
                });
            })
        </script>
        <button>FadeIn</button> <span>Hello, world!</span>
    </body>
</html>
于 2012-04-22T19:45:48.757 回答