动画在wordpress中不起作用

Posted 2023-05-08

【中文标题】动画在wordpress中不起作用

【英文标题】：Animation not working in wordpress

【发布时间】：2013-02-18 08:09:18

【问题描述】：

我正在努力实现一个简单的 jquery 动画，该动画在我所做的另一个网站上完美运行。我所做的唯一更改是希望将动画影响到与选择器不同的对象（希望我正确使用了这些术语）。奇怪的是，即使我测试使用与前一个站点完全相同的场景，我也没有得到任何结果。

谁能看出这不起作用的一些明显原因？

这是我的 jquery：

jQuery(document).ready(function($)
    $(".themelist li").hover(
        function () 
            $(".themedescription").animate(opacity:"1");
        ,
        function () 
            $(".themedescription").animate(opacity:'0', "fast");
        
    );  
);

这是我的循环（wordpress）：

echo "<div class='themelist'><ul>";
foreach ( $terms as $term ) 
    echo "<li>" . $term->name ."</li><div class='theme-description'>". $term->description. "</div>";

echo "</ul></div>";

这是我的 CSS：

.themelist 
position: relative;
cursor: pointer;


.themelist li width:200px;

.theme-description 
text-align: left;
color: #CCC;
background: #333;
width:300px;
position: absolute;
padding: 20px;
top:0;
left:200px;
opacity:0;

想法？到处搜索，无法弄清楚我哪里出错了。

更新

取得进展，但现在有一个全新的问题。以下调整后的 jquery finallyw 可以让我的动画运行：

$(document).ready(function()

$(".themelist li").hover(function()
    
$(".themedescription").filter(':not(:animated)').animate(opacity:"1");
    ,
(function()
    
$(".themedescription").animate(opacity:"0");
    
)); 
);

但正如你可以想象的那样，不是 div 一个一个出现，每个对应我列表中的链接，它们都是同时出现的。嘎。我应该看到这一点，但有点假设它的行为类似于 CSS display:none，并且一次只显示一个。

我可以使用另一种效果来解决这个问题吗？还是我需要生成单独的类，以便我的 div .themedescription 变为 .themedescription1、.themedescription2 等？

再次非常感谢。感谢您的想法。 -jennyb

【参考方案1】：

jQuery 代码上的.themedescription 是针对 html/wordpress 代码的拼写错误...

请在您的 jQuery 代码中使用 .theme-description.... 和破折号...