我的jQuery函数生成的动画很不稳定,我一直在寻找不同的SO解决方案,例如添加
jquery.easing,但没有运气.问题是每个div中的iframe吗？
关于如何平滑动画的任何想法？我的基本切换功能是最好的方法吗？
JSFiddle：http://jsfiddle.net/gwLcD/8/
基本标记在下面,并在页面上重复多次(每个“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);
}
});
});
@H_502_14@
解决方法
安德鲁的解决方案是正确的,但我仍然会把这样的CSS(如果javascript关闭)：
.videoblock {宽度：560像素;身高：315px;溢出：隐藏}
.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/
@H_502_14@ @H_502_14@ 原文链接：https://www.f2er.com/jquery/178863.html