平滑这个 jQuery 切换动画吗？

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{宽度：560px;高度：315 像素；溢出：隐藏}

并添加同步动画：

$('.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/< /a>

Answer 2

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

它使用这个jquery

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

Answer 3

我们这样看吧！

我不确定您将在此处的一页上加载多少个 iframe，但有一件事似乎非常确定：如果您有太多，您将有足够的 iframe 和足够的 YouTube 视频加载。

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

因此：

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 根据所使用的浏览器类型来更改工作方式。