平滑这个jQuery切换动画？

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

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

JSFiddle： http ： //jsfiddle.net/gwLcD/8/

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

 
View a few minutes of the (title) video 
 
   

function：

 $(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); } }); }); 

Answer 1

安德鲁的解决方案是正确的，但我仍然会把这样的CSS（如果javascript关闭）：.videoblock {width：560px; 身高：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"}, { duration: 400, queue: false }); } }); 

这是决赛的链接： http ： //jsfiddle.net/gwLcD/21/

Answer 2

看看这个 – http://jsfiddle.net/vbXVR/ 。

它使用这个jquery

 $(document).ready(function(){ $(".entry-title").click(function() { $(".videoblock").animate({height: "315"}, 1500); }); }); 

Answer 3

让我们这样看吧！

我不确定你将在这里加载多少这些iframe，但有一点似乎是非常肯定的; 如果你有一个太多，你将有足够的iframe与足够的youtubevideo加载。

这意味着，不必要的负载。 用户可能无法单击所有这些链接。 用户可能无法观看所有这些video。

所以：

1. 资源不必要地膨胀，并且不必要地消耗用户的带宽。

2. 而且，这不是可扩展的。 考虑一下，您需要在页面上显示50个这样的链接。 好。 只需10个。即便如此！

我正在为这个做一个jsfiddle。 完成之后会在这里发布！

Answer 4

您主要针对什么浏览器？ 如果它是任何webkit浏览器或FireFox，那么你可以利用jquery后备的硬件加速CSS3过渡。

http://msdn.microsoft.com/en-us/scriptjunkie/hh304380

我不认为jQuery缓动当前使用CSS3过渡作为第一选项，但如果我错了，请纠正我。

看看： http ： //css3.bradshawenterprises.com/all/

使用CSS3来破解一些东西并不会太费力。

Answer 5

您不想直接使用手风琴插件的任何特定原因？ jQuery UI库应该非常好地处理这个问题。

此外，如果没有按预期工作，你可以尝试css3动画？ 你可以在这里获得CSS3动画的要点： http ： //titansturf.in/2012/01/12/using-css3-transitions/

您将必须创建两个类，一个具有div-hide ，其height: 0 ，另一个具有div-show ，其具有所需的height设置。 每当你想要切换时，只需使用jQuery更改类。

IMO，使用CSS3将是一个很好的选择，目标受众使用现代浏览器。 如果没有，您可以使用Modernizr根据所使用的浏览器类型更改工作方式。