jQuery UI 切换类动画在 Safari / Chrome 中没有动画 - 但在 Firefox 中动画？

Posted 2023-05-08

【中文标题】jQuery UI 切换类动画在 Safari / Chrome 中没有动画 - 但在 Firefox 中动画？

【英文标题】：jQuery UI Switch Class Animation not animating in Safari / Chrome - but animates in Firefox?

【发布时间】：2012-01-12 20:37:44

【问题描述】：

http://jsfiddle.net/motocomdigital/b22Yt/1/

当 div 悬停时，我正在尝试为框内的绝对 div 定位做一个基本动画。

当 div 悬停时，div.inside 应该从上到下进行动画处理。使用类。内幕是动态的，因此我不得不使用 UI 方式。

请参阅jsFiddle 以测试会发生什么。在Firefox中，它的动画。在 safari 和 chrome 中，不是吗？奇怪，我在mac上还没有测试过IE。

我从这里http://jqueryui.com/docs/switchClass/得到了开关类src

我的代码做错了吗？即使在 Firefox 中，也会有一点跳动。

任何专业人士的帮助都会非常感谢！

http://jsfiddle.net/motocomdigital/b22Yt/1/

标记

<div class="box">

    <div class="inside bottom">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi purus, tincidunt sit amet aliquet quis, semper vel urna. Morbi mollis nulla nisi, ut euismod elit. Nam et arcu velit, id faucibus velit. Sed blandit feugiat quam, nec laoreet nisl suscipit quis.

    </div>

</div>

CSS

.box 
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    margin: 10px;
    overflow: hidden;
    position: relative;


.inside 
    position: absolute;
    background: black;
    color: #ffffff;
    font-size: 10px;
    overflow: hidden;
    padding: 10px;
    width: 180px;
    word-wrap: break-word;



.top 
    top: 0;


.bottom 
    bottom: 0;

脚本

$(".box").hover(function()

     $(this).children(".inside").switchClass( "bottom", "top", 300 );

 , function() 

     $(this).children(".inside").switchClass( "top", "bottom", 300 );

);

【参考方案1】：

当使用 UI switchClass 方法制作动画时，您应该始终在两个类中使用相同的 css 选择器，因为 jQuery UI 需要一些东西来比较。

换句话说，如果类看起来像：

.top top: 0;
.bottom top: 200px;

动画可以跨浏览器正常工作，但如果类看起来像：

.top top: 0;
.bottom bottom: 0;

jQuery 将无法比较这两个值并在它们之间创建动画。 试试看，你会看到的。

对于您的具体示例，您根本不需要 jQuery UI，而且它似乎是一种奇怪的方式来做一些基本的事情，比如向上/向下动画元素。

我会这样做：

$(".box").each(function() 
    var self = $(this),
        child = self.children('.inside'),
        _top = parseInt(self.css('height')) - parseInt(child.css('height')) - 20; //  -20 for padding
        child.css(top: _top);
        $(this).data('_top', _top);
);

$(".box").hover(function()
    $(this).children(".inside").stop(true, true).animate(top: 0, 300);
 , function() 
    $(this).children(".inside").stop(true, true).animate(top: $(this).data('_top'), 300);
);

不需要课程或其他任何东西，直截了当，这里有一个小提琴来展示它：http://jsfiddle.net/b22Yt/4/

【讨论】：

嘿伙计，非常感谢您的回复。很好，但是当我进入我的网站时，它所读取的高度不正确并且位置错误。我在这个版本jsfiddle.net/motocomdigital/uTV5k/14 上遇到了完全相同的问题，这个版本获取文本 div 的高度，将高度放入一个变量中，然后该变量进入一个位置。但它在文件加载上是错误的。在这个 jsFiddle 上，在所有浏览器上都很好。但是当我将此代码放在我的网站上时，它会得到不正确的文本高度，但是当我悬停一次时，它会返回正确的值。

它实际上似乎在 Chrome 中运行良好。快速查看您的网站，看起来不错，但试图找出 WordPress 网站上的所有内容并不容易。该函数遍历所有 .box 元素，获取高度，然后计算 .inside div 应距顶部的距离，将该距离存储在 data 键中并稍后应用它以使元素下降到正确的距离动画到顶部：0。它可能非常简单，比如使用 height() 而不是使用实际的 css 高度，虽然它们应该是相同的，但我不知道？

啊，现在我明白你的意思了。数据函数实际上为它迭代的每个元素存储了一个不同的值，使用全局变量将不起作用，它只会在每次迭代时用类“box”覆盖所有元素的变量，你最终得到与所有盒子上的最后一个盒子的距离相同，您需要为每个元素设置不同的距离，因此使用 data 函数是正确的方法，并且不能仅使用一个全局变量来完成。它可以用点表示法或数组来完成，但 data() 更容易，更好。

感谢您的浏览。正如你可能知道的那样，我并没有大量使用我的 jquery/javascript - 但你是说不是一个在全局范围内运行所有动画的函数，而是在该函数中使用一个对每个函数都不同的变量，不起作用？但是我已经在所有浏览器中测试了上面的 jsFiddle 并且效果很好 - 那是因为它是内联 html 而不是 wordpress php 加载的文本？我很困惑，这就是为什么我一直在寻找不涉及高度的方法，因此是***和底部的职位问题；就像你说的那样，永远行不通：/

如果小提琴按您预期的方式工作，并且由于某种原因，相同的脚本在您的 WordPress 网站上无法正常工作，则说明存在干扰，它可能与全局变量或PHP，这些都不应该有任何重要性。它可能与返回的高度值有关，您可以尝试将它们记录到控制台以检查它们是否正确返回，如果确实如此，则某些内容会覆盖该脚本中设置的位置，我不知道什么或如何，而您将不得不做一些故障查找来尝试解决它。控制台是您的朋友。