jQuery：顺利滑入元素？

Posted 2023-03-06

【中文标题】jQuery：顺利滑入元素？

【英文标题】：jQuery: slide in element smoothly?

【发布时间】：2015-04-30 12:28:21

【问题描述】：

我正在尝试使用 jquery 平滑地滑入元素。

但由于某种原因，元素并没有真正滑入，效果也不是很流畅！

请在此处查看 jsfiddle：http://jsfiddle.net/q7o0p488/1/

这是我的 jquery 代码：

$(function() 
    $('.mypro').hover(function() 
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle();

      ,
      function()
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      
   );
);

我试图创建的效果基本上是从顶部平滑地滑动红色元素。

任何帮助将不胜感激。

【问题讨论】：

你可以让它在一个不可见的元素（用户没有意识到的存在）后面渲染（开始淡入），甚至是非常小的东西。随着变化开始呈现，它似乎变得平滑，所以如果你覆盖最初的艰难毫秒，它可能会带来预期的结果。

在 mac 上的 chrome 上非常流畅。也许添加 z 变换技巧以使其通过 gpu 渲染，或切换到使用 css 过渡。

【参考方案1】：

尝试调整slideToggle 的持续时间。 http://jsfiddle.net/oehzLsvc/

【讨论】：

谢谢。我现在采用 CSS 方式。

【参考方案2】：

如果这对您的应用程序有意义，您可以使用 css3 执行此操作。这里给出了一个例子。

CSS 3 slide-in from left transition

【讨论】：

正是我想要的。旧浏览器不支持 CSS3，但那些使用旧浏览器的用户需要升级，因为我们现在是 2015 年，哈哈

【参考方案3】：

如果你想在这里使用Slidetoggle()

添加slow。

这样

$(function() 
    $('.mypro').hover(function() 
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle('slow');

      ,
      function()
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      
   );
);

在这里查看http://jsfiddle.net/q7o0p488/2/

【讨论】：

谢谢。我现在采用 CSS 方式。