Как я могу использовать параметр продолжительности в .animate, если он находится внутри обратного вызова из эффекта .fadeOut? - PullRequest
Новая
       20

Как я могу использовать параметр продолжительности в .animate, если он находится внутри обратного вызова из эффекта .fadeOut?

0 голосов
/ 11 мая 2010

Я пытаюсь просто потушить содержимое section#secondary, и как только содержимое исчезнет, ​​родительский элемент (section#secondary) должен анимировать 'shut' в анимации слайдера.

Все это работает, но длительность - нет, и я не могу понять, почему.

Вот мой код:

HTML 

<section id="secondary">
    <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button -->              
    <article>

        <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>

        <section 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>  

            <img src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/images/sample-image-enlarged.jpg" width="418" height="280" alt="" />

        </section>

    </article>

    <footer>
        <embed src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/flash/secondary-footer.swf" wmode="transparent" width="495" height="115" type="application/x-shockwave-flash" />
    </footer>

</section> <!-- close secondary -->

JQuery 

// =============================
// = Close button (slide away) =
// =============================
$('a.slide_button').click(function() {
    $(this).closest('section#secondary').children('*').fadeOut('slow', function() {
        $('section#secondary').animate({'width':'0'}, 3000);
    });
});

Поскольку содержимое section#secondary является переменным, я использую селектор *.

В результате fadeOut использует соответствующую slow скорость, но как только обратный вызов сработает (как только содержимое исчезнет) section#secondary анимируется до width: 0 в пределах пару миллисекунд, а не 3000 мс (3 секунды) Я установил продолжительность анимации на

Любые идеи приветствуются.

PS: я не могу опубликовать пример на данный момент, но так как это больше вопрос теории jQuery, я не думаю, что пример здесь необходим. Поправь меня, если я ошибаюсь ..

Ответы [ 2 ]

0 голосов
/ 11 мая 2010

вы уверены, что ширина изменилась на 0? выполняя следующий пример, я вижу, что ширина не равна 0, пока не сработает первый обратный вызов.

обратите внимание, что обратный вызов запускается один раз для каждого потомка первого уровня, поэтому в этом примере 3 раза 

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <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>
0 голосов
/ 11 мая 2010

Я полагаю, что по крайней мере одна потенциальная проблема заключается в том, что обратный вызов из .fadeOut() (который затем вызывает .animate()) может выполняться несколько раз для числа детей, выбранных из .children('*'). Это, вероятно, должно быть переработано таким образом, чтобы обратный вызов выполнялся только один раз.

...