Question

我使用JQuery相当新，只是玩游戏。我试图通过点击按钮来淡化元素。如果用户再次单击该按钮，当元素仍然淡入时，我希望它再次启动隐藏/不可见。所以我首先停止所有动画stop(true)然后隐藏元素让它淡入。

我无法让它工作。看起来第二个淡入淡出开始于元素在那一刻具有的不透明度并从那里消失。我还尝试使用css("opacity", 0)代替hide()但是元素只是将它的不透明度设置为0而fadeIn似乎不再起作用。< / p>

<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中尝试过。

我做错了什么？

Answer 1

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

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

所以，如果你在执行fadeOut()时处于.stop(true)的中间，那么你可以做.stop(true, true)并将当前动画跳到最后，从而为您提供一个从fadeIn()开始的好地方。

您也可以停止动画，然后从那里淡出到完全不透明度：

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

更常见的是当你打断上一个动画时你想要做的事情。

Answer 2

将第二个true传递给"jump to the end"：

.stop(true,true)

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

Answer 3

问题是当你停止你的跨度并且动画没有完成时，fadeIn功能会将你的范围淡化到最后一个已知的不透明度（由于动画未完成，因此不是1），所以你可以将另一个真正的旗帜传递给stop函数，如Esailija所说，或者你可以使用fadeTo代替fadeIn：

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

此处的演示演示：http://jsfiddle.net/V8wRE/3/

Answer 4

我今天早些时候遇到了这个问题但是没有淡入淡出。我刚刚使用了这段代码

$(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>

为什么不停止动画然后开始新的fadeIn工作？

4 个答案: