ansaurus

Question

How can i use a duration setting on .animate if it is inside the callback from a .fadeOut effect?

Answer 1

A:

I believe at least one potential problem here is that the callback from .fadeOut() (which then calls the .animate()) may execute multiple times for the number of children elected from .children('*'). This should probably be reworked in such a way that the callback is only executed once.

awgy 2010-05-11 03:05:04

Answer 2

A:

are you sure the width has changed to 0? running the following sample I can see the width is not 0 until the first callback is fired.

note that the callback is fired once per first level child, therefore 3 times in this sample

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">

            $(document).ready(function() {
                $('a.slide_button').click(function() {
                    $('div#secondary').children().fadeOut('slow',function(){
                        // this has scope of the html element
                        console.log(this);
                        console.log($(this).parent().width());
                        $(this).parent().animate({'width':'0'}, 3000, function(){
                            console.log($(this).width());
                        });
                    });
                });
            });

        </script>
    </head>
    <body>

        <div id="secondary" style="background: red;">          
            <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button -->  
            <div>

                <h1>photos</h1>
                <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div>
                <div class="bar">
                    <p class="section_title">current image title</p>
                </div>

                <div class="image">

                    <div class="links"> 
                        <a class="_back album_link" href="#">« from the album: james new toy</a>
                        <nav>
                            <a href="#" class="_back small_button">back</a>
                            <a href="#" class="_next small_button">next</a>
                        </nav>
                    </div>  

                </div>

            </div>

            <div>
                <p>Footer</p>
            </div>

       </div>

    </body>
</html>

Jonathan 2010-05-11 03:26:47

ansaurus

tags:

views:

answers:

How can i use a duration setting on .animate if it is inside the callback from a .fadeOut effect?

related questions