jqueryUI effects not working properly on form elements_问答_开发者

jqueryUI effects not working properly on form elements

开发者 https://www.devze.com 2023-03-21 08:30 出处：网络

I\'m using jQueryUI\'s effects function on a div containing some form elements like dropdowns. However the transitions are all missing, ie. when showing/hiding the div, the transition is abrupt no mat

I'm using jQueryUI's effects function on a div containing some form elements like dropdowns. However the transitions are all missing, ie. when showing/hiding the div, the transition is abrupt no matter the effect chosen. However it works on other divs!

jQuery:

$('h2').click(function() {
开发者_JAVA技巧    var options = {};
    $("#writereview_optional").toggle('blind', options, 500);
});

HTML:

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

There are some things that need to be done to verify that you are working correctly. Get Chrome out (or download it if you dont. I personally do not like chrome except i LOVE the debugger/js debugger) and press Ctrl + Shift + I to view if there are any jquery errors.

First: click on the h2 element and see if it causes an uncaught error (causing an abrupt stop in processing making it look like effects are not working).

Second: to check to see if things are working, open up to the point in the HTML that the element resides (You can press Esc to minimize the error window then just navigate to the DOM location of the element). And watch the elements style attributes during the "effect". If nothing happens, try a simple fadeOut(1000), fadeIn(1000) call and see if that edits it. If it does not, i suspect you might have a spelling issue/id duplication issue!

So i tried this and it worked just fine

<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 thanks, i did not know about toggle. Toggle is awesome :)