Question

我在包含一些表单元素（如下拉列表）的div上使用jQueryUI的效果函数。然而，过渡都是缺失的，即。当显示/隐藏div时，无论选择何种效果，转换都是突然的。但它适用于其他div！

jQuery的：

$('h2').click(function() {
    var options = {};
    $("#writereview_optional").toggle('blind', options, 500);
});

HTML：

<div id="writereview_optional">
    //form elements...
</div>

Answer 1

有一些事情需要做，以验证您是否正常工作。将Chrome打开（或者如果你没有下载它。我个人不喜欢chrome，除了我喜欢调试器/ js调试器）并按Ctrl + Shift + I来查看是否有任何jquery错误。

首先：点击h2元素并查看它是否会导致未被捕获的错误（导致处理突然停止使其看起来效果不起作用）。

第二：检查事物是否正常工作，打开元素所在的HTML中的点（您可以按Esc以最小化错误窗口，然后只导航到元素的DOM位置）。并在“效果”中观察元素样式属性。如果没有任何反应，请尝试一个简单的fadeOut（1000），fadeIn（1000）调用，看看是否编辑它。如果没有，我怀疑你可能有拼写问题/身份重复问题！

所以我试过这个并且工作得很好

<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
        <link   type="text/css"        href="styles/jquery-ui-1.8.14.custom.css" rel="stylesheet"  />
    </head>
    <body>
        <h2 class="ui-state-error ui-corner-all" style="padding:10px">Click Me</h2>
        <div id="writereview_optional">
            <div class="ui-state-active ui-corner-all" style="padding:20px">
                This is a test
            </div>
            <form>
                <ul>
                    <li>
                        <input type="text">
                    </li>
                </ul>
                <ul>
                    <li>
                        <input type="text">
                    </li>
                </ul>
                <ul>
                    <li>
                        <input type="text">
                    </li>
                </ul>
                <ul>
                    <li>
                        <input type="text">
                    </li>
                </ul>
            </form>
        </div>

        <script type="text/javascript">
            $('.ui-state-error').click(function() {
                var options = {};
                $("#writereview_optional").toggle('blind', options, 500);
            });
        </script>
    </body>
</html>

PS谢谢，我不知道切换。切换真棒：）

jqueryUI效果在表单元素上无法正常工作

1 个答案: