平滑这个jQuery切换动画？

我的jQuery函数生成的动画很不稳定,我一直在寻找不同的SO解决方案,例如添加 jquery.easing,但没有运气.问题是每个div中的iframe吗？

关于如何平滑动画的任何想法？我的基本切换功能是最好的方法吗？

基本标记在下面,并在页面上重复多次(每个“videotoggle”div之间有文本块)：

<div class="videotoggle">
 
    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p>
 
    <div class="videoblock">
 
    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????"
    frameborder="0" allowfullscreen></iframe>
 
    </div></div>

功能：

$(document).ready(function(){
$(".videoblock").hide();  //closes all divs on first page load
$(".entry-title").click(function() {
    $this = $(this);  //this next code only allows one open div at a time
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").slideToggle(400);  //slide toggle
        $content.slideToggle(400);
    }
});
});

解决方法

安德鲁的解决方案是正确的,但我仍然会把这样的CSS(如果javascript关闭)：
.videoblock {宽度：560像素;身高：315px;溢出：隐藏}

并添加同步动画：

$('.videoblock').css('height','0');
$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {
 
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").animate({height: "0"},{ duration: 400,queue: false });
        $content.animate({height: "315"},queue: false });
    }
});

以下是决赛的链接：http://jsfiddle.net/gwLcD/21/

平滑这个jQuery切换动画？

解决方法

猜你在找的jQuery相关文章