8

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

5 回答 5

11

安德鲁的解决方案是正确的，但我仍然会这样放置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/

于 2012-01-29T16:21:56.047 回答
5

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

它使用这个 jquery

$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});
于 2012-01-28T21:34:48.897 回答
4

让我们这样看！

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

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

所以：

  1. 资源不必要的膨胀，以及用户带宽的不必要消耗。

  2. 而且，这是不可扩展的。考虑一下，一个页面上需要 50 个这样的链接。好的。只需 10 个。即使这样也不少！

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

于 2012-02-04T19:49:47.460 回答
1

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

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

您将必须创建两个类，一个带有div-hide，它具有height: 0，一个带有div-show，具有所需的height集合。每当您想切换时，只需使用 jQuery 更改类即可。

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

于 2012-02-01T07:15:39.320 回答
1

您主要针对哪种浏览器？如果它是任何 webkit 浏览器或 FireFox，那么您可以利用带有 jquery 回退的硬件加速 CSS3 转换。

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

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

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

使用 CSS3 破解一些东西一点也不费力。

于 2012-02-04T15:42:39.787 回答