如果 .animate 位于 .fadeOut 效果的回调内部，如何使用 .animate 的持续时间设置？

发布于 2024-08-31 16:24:50 字数 2321 浏览 3 评论 0原文

我试图淡出 section#secondary 的内容，一旦内容淡出，父级 (section#secondary) 应该以动画方式“关闭”滑块动画。

所有这些都有效，但持续时间却不起作用，我不明白为什么。

这是我的代码：

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 理论问题，我认为这里不需要示例。 如果我错了请纠正我..

原文

I am trying to just fade the content of section#secondary out and once the content has been faded out, the parent (section#secondary) should animate 'shut' in a slider animation.

All this is working however the durations are not and I cannot figure out why.

Here is my code:

HTML

<section id="secondary">
    <a href="#" class="slide_button">«</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);
    });
});

Because the content of section#secondary is variable I use the * selector.

What happens is that the fadeOut uses the appropriate slow speed but as soon as the callback fires (once the content is faded out) the section#secondary animates to width: 0 within a couple of milliseconds and not the 3000 ms ( 3 sec ) I set the animation duration to.

Any ideas would be appreciated.

PS: I cannot post an example at this point but since this is more a matter of theory of jQuery I don't think an example is necessary here. Correct me if I am wrong..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

携余温的黄昏 2024-09-07 16:24:50

我相信这里至少有一个潜在的问题是来自 .fadeOut() 的回调（然后调用 .animate()）可能会针对子级的数量执行多次从 .children('*') 中选出。这可能应该以回调只执行一次的方式进行修改。

回复收藏 0 原文

兲鉂ぱ嘚淚 2024-09-07 16:24:50

你确定宽度已经变成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">«</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>

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"></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">«</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 原文

~没有更多了~