gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 04:18:42 27 4
gpt4 key购买 nike

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

  • 你显示div。它动画正确。
  • 你隐藏了div。正确的。
  • 你再次显示 div。它显示但没有动画。它停留在您第一次中断它时的值。

  • 所以不知何故,在 [add|remove]Class 期间发生的插值 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 跳转到队列中的最后一个动画。再次没用,因为我们实际上将停留在循环本身的一件事上。第二个参数必须是 false中断,否则,无限循环。

    中断的问题。它将 css 留在原处。你现在被随机 css Prop 困在你的动画插值上(在我的例子中是 background-color )。我也希望中断是即时的。所以没有其他办法。

    就我而言,background-colorelement.style 上设置动画期间(通过浏览器工具中的检查发现),它会覆盖正在发生的任何其他事情。这个 Prop 直到第一个动画开始运行时才存在。然后它被打断了,应该是临时的风格被卡在了那里(我猜)。

    所以你再次运行动画。应用绿色类。 jQuery 计算出要通过的颜色范围。原来它从#shadeofgreen 到#thesameshadeofgreen,因为卡住了element.styles value 覆盖类提供的任何内容。所以动画在两个相同颜色之间滑动。它在运行!但是没有颜色可以改变。

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

    改变

    $('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关于 green 中的颜色css 类,不起作用,因为(似乎)会覆盖 element.styles (jQuery 动画使用的),你不会得到想要的结果。

    当然,我仍然愿意接受建议。我可能错过了一些东西,因为我只是在一周的顶部才开始研究 CSS 和 jQuery。

    可以看到 .removeAttr('style')的效果在固定码 here on jsbin .

    关于jquery-ui - jQuery UI - addClass removeClass - CSS 值被卡住,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2649167/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com