0

我正在努力实现一个简单的 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 等？

再次感谢。感谢您的想法。-珍妮布

4

1 回答 1

2

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

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

于 2013-03-04T09:24:50.050 回答