jquery-ui – jQuery UI – addClass removeClass – CSS值被卡住了

2023年1月3日 232次阅读

我正在尝试做一个简单的动画.

>你展示div.它动画正确.
>你隐藏div.正确.
>你再次展示div.它显示但没有动画.当你第一次打断它时,它会被卡住.

所以在[add | remove]类中发生的插值CSS不知何故被卡在那里.第二次,[add | remove]类实际上正在运行,但是它从类中设置的css被忽略了(我认为被黯然失色).如何在不使用.animate和硬编码样式值的情况下解决这个问题？重点是将动画终点放在css类中.

谢谢！

<!doctype html>

<style type="text/css">
div {
    width: 400px;
    height: 200px;
}
.green {
    background-color: green;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#show').bind({
        click: function() {
            showAndRun()
        }
    })
    $('#hide').bind({
        click: function() {
            $('div').stop(true, false).fadeOut('slow')
        }
    })

    function showAndRun() {
        function pulse() {
            $('div').removeClass('green', 2000, function() {
                $(this).addClass('green', 2000, pulse)
            })
        }
        $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
    }
})
</script>

<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>

你也可以看看它做了什么here at jsbin

最佳答案 我找到了解决方案.不过不确定我是否对此感到满意.单击show时,它实际上是CSS的非常糟糕的“重置”

动画永远循环.所以我不能依赖jQuery队列(有限长度).我必须通过回调实现循环,如代码所示.导致的问题：你不能.stop(true,true).第一个true清除队列,但在当前正在运行的动画之后队列中没有任何内容.所以这没用.第二个true跳转到队列中的最后一个动画.再无用,因为我们实际上将继续留在循环的一件事上.第二个arg必须是false才能中断,否则就是无限循环.

中断的问题.它将css留在原处.你现在已经陷入了随机css道具,无论你的动画插入的是什么(在我的例子中是背景颜色).我也希望中断是即时的.所以别无他法.

在我的例子中,动画期间的背景颜色是在element.style上设置的(通过浏览器工具中的检查发现),它会覆盖正在发生的任何其他事情.直到第一个动画开始运行,这个道具才存在.然后它被打断了,假定的临时风格卡在那里(我猜).

所以你再次运行动画.绿色课程已应用. jQuery计算出要进行的颜色范围.原来它从#shadeofgreen到#thesameshadeofgreen,因为卡住的element.styles值会覆盖类提供的任何内容.因此动画在两种相同颜色之间滑动.它正在运行！但是没有颜色可以改变.

所以在我的情况下修复并不可怕,但我仍然不确定我喜欢它,因为我不确定它是否可以轻松应用于各种情况.

更改

$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)

至

$('div').stop(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse)

关键是

.removeAttr('style').hide().addClass('green')

这基本上是你的css重置.保证在您需要时始终在那里,因为它恰好在事物再次显示之前发生.

请注意,将！important放在绿色css类中的颜色上是行不通的,因为(似乎)将覆盖element.styles(jQuery动画使用的),并且您将无法获得所需的结果.

当然,我仍然愿意接受建议.我可能错过了一些东西,因为我只是在本周最开始看CSS和jQuery.

您可以在固定代码here on jsbin中看到.removeAttr(‘style’)的效果.

点赞