是否可以为 switchClass jQuery UI 函数选择效果？答案

【问题标题】：Is it possible to choose the effect for a switchClass jQuery UI function?是否可以为 switchClass jQuery UI 函数选择效果？
【发布时间】：2012-04-24 23:35:54
【问题描述】：

我想通过 switchClass 为按钮更改添加一个微妙而快速的淡出和淡入效果。

jQuery("a#btnPause").switchClass(pauseClass,playClass,200);

默认使用的效果是slideLeft。

如果我要使用标准的 jQuery，我想对 addClass 和 removeClass 施加影响，但这可能吗？

【问题讨论】：

标签： jquery class jquery-ui

【解决方案1】：

有点像

$("a#btnPause").fadeOut(200).switchClass(pauseClass,playClass,200).fadeIn(200);

你在找什么？

【讨论】：

啊，你能把效果链接起来吗，很好。 a#btnPause 是一个按钮，我认为让它消失并不好，因为那时其他按钮（也在那里）会移动。当我淡出不透明度 0.01 时，我仍然认为您的解决方案很棒。谢谢！
我认为fadeOut 不会导致周围元素移动，因为它只是将不透明度设置为零——它实际上并没有隐藏元素（通过display: hide）。这是正确的吗？
我认为淡出以显示结束：无我要做一些测试:)
你完全正确！我第一次在文档中错过了这一点。对不起！另一方面，您仍然可以将元素 fadeTo 0（而不是 0.01）隐藏起来。

【解决方案2】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnDemo').click(function () {
                $('a#btnPause').fadeOut(200).switchClass('pauseClass', 'playClass', 200).fadeIn(200);
            });
        });
    </script>
    <style type="text/css">
        .pauseClass
        {
            color: Red;
        }

        .playClass
        {
            color: Green;
        }
    </style>
</head>
<body>
    <a id="btnPause" class="pauseClass">Text</a>
    <input type="button" id="btnDemo" value="Demo" />
</body>
</html>

【讨论】：