平滑这个 jQuery 切换动画？

Posted 2023-02-25

技术标签:

【中文标题】平滑这个 jQuery 切换动画？【英文标题】：Smooth out this jQuery toggle animation? 【发布时间】：2012-01-26 21:02:01 【问题描述】：

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

【问题讨论】：

你能在 jsfiddle 上复制它吗？在 Chrome 中对我来说似乎可以正常工作：jsfiddle.net/gwLcD/3 实际上，在 win ff 9.x 上观看 Jivings 的小提琴确实会导致动画有点断断续续。 @Jivings：啊，我应该先设置一个 jsfiddle。这是一个：jsfiddle.net/gwLcD/8，带有更完整的代码和活动的 youtube 链接。由于某种原因仍然波涛汹涌。集成 jquery.easing 会有帮助吗？ @songdogtech 有趣。我认为这与视频有关。您是否考虑过隐藏视频，仅在打开选项卡时显示一个占位符。然后当动画完成时你展示它？ 【参考方案1】：

Andrew 的解决方案是正确的，但我仍然会这样放置 css（如果 javascript 已关闭）： .videoblock宽度：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/

【讨论】：

谢谢！效果很好，任何时候都只允许打开一个 div，就像我需要的那样。【参考方案2】：

检查一下 - http://jsfiddle.net/vbXVR/。

它使用这个 jquery

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

【讨论】：

我个人遇到过 jquery 的“自动”切换、显示、淡入淡出等奇怪行为……关于“未成熟”元素的动画。我也可以说，正如 Andrew 在这里建议的那样，经常手动为属性设置动画可以解决问题。我添加了一个 jsfiddle：jsfiddle.net/gwLcD/8 稍微复杂的部分是我将函数设置为一次只允许打开一个 div。【参考方案3】：

让我们这样看吧！

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

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

所以：

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

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

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

【讨论】：

【参考方案4】：

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

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

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