Question

我的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);
    }
});
});

Answer 1

安德鲁的解决方案是正确的，但我仍然会把这样的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"}, { 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与足够的youtube视频加载。

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

所以：

资源不必要的膨胀，以及用户带宽的不必要消耗。
此外，这不具备可扩展性。考虑一下，您需要在页面上显示50个这样的链接。好。只需10个。即便如此！

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

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

平滑这个jQuery切换动画？

5 个答案: