Jquery 如何在.fadeOut效果的回调中使用.animate上的持续时间设置？_Jquery_Callback_Jquery Animate_Fadeout_Duration

Jquery 如何在.fadeOut效果的回调中使用.animate上的持续时间设置？

jquery

Jquery 如何在.fadeOut效果的回调中使用.animate上的持续时间设置？,jquery,callback,jquery-animate,fadeout,duration,Jquery,Callback,Jquery Animate,Fadeout,Duration,我正在尝试淡出section#secondary的内容，一旦内容淡出，父级（section#secondary）应该在滑块动画中设置“关闭”动画所有这些都是工作，但持续时间不是，我不知道为什么这是我的密码： HTML <section id="secondary"> <a href="#" class="slide_button">«</a>

我正在尝试淡出

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

因为

部分#secondary

的内容是可变的，所以我使用

选择器

发生的情况是，

fadeOut

使用适当的

slow

速度，但一旦回调触发（一旦内容淡出），则

部分#secondary

在几毫秒内将动画设置为

宽度：0

，而不是我设置的动画持续时间为3000毫秒（3秒）

任何想法都将不胜感激

PS：我现在不能发布一个例子，但因为这更多的是关于jQuery的理论问题，所以我认为这里不需要一个例子。如果我错了，请纠正我。

我相信这里至少有一个潜在的问题是，

.fadeOut（）

（然后调用

.animate（）

）的回调可能会对从

中选择的子对象数执行多次。子对象（'*'）

。这可能需要重新处理，以便回调只执行一次。

您确定宽度已更改为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>


$（文档）.ready（函数（）{
$（'a.slide_按钮'）。单击（函数（）{
$（'div#secondary'）.children（）.fadeOut（'slow'，function（））{
//这具有html元素的作用域
console.log（this）；
log（$（this.parent（）.width（））；
$（this.parent（）.animate（{'width'：'0'}，3000，function（））{
log（$（this.width（））；
});
});
});
});
照片
| 
当前图像标题
页脚

我看到的不仅仅是这段代码的行为：您的实际页面中肯定有一些外部/额外的东西。但是，应该检查

$（'section#secondary:not（：animated）

），因为您为每个褪色的孩子启动动画，而不是只启动一次。我更新了答案。我猜这是因为您没有为

#secondary

设置任何大小属性，所以当其内容被删除时，它会自动折叠为零。我的新答案（如下）在单击时以及动画之前静态设置其大小。

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