我正在尝试将内容淡出section#secondary
,一旦内容淡出,父 ( section#secondary
) 应该在滑块动画中设置“关闭”动画。
所有这些都有效,但是持续时间没有,我不知道为什么。
这是我的代码:
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);
});
});
因为内容section#secondary
是可变的,所以我使用*
选择器。
发生的情况是fadeOut
使用适当的slow
速度,但是一旦回调触发(一旦内容淡出),section#secondary
动画就会width: 0
在几毫秒内而不是 3000 毫秒(3 秒)内,我将动画持续时间设置为。
任何想法,将不胜感激。
PS:此时我无法发布示例,但由于这更多是关于 jQuery 的理论问题,我认为这里不需要示例。如果我错了请纠正我..