0

私が行った別のサイトで完全に機能する単純なjqueryアニメーションを実装しようとして、髪を引き裂いています。私が行った唯一の変更は、アニメーションをセレクターとは別のオブジェクトに影響を与えたいということです (これらの用語を正しく使用していることを願っています)。奇妙なことに、以前のサイトとまったく同じシナリオを使用してテストしても、結果が得られません。

これが機能しない明らかな理由を誰かが見ることができますか?

これは私のjqueryです：

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

これは私のループです（ワードプレス）：

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 が 1 つずつ表示されるのではなく、すべて同時に表示されます。ガッ。これが来るのを見るべきだったのですが、CSS の display:none と同じように動作し、一度に 1 つだけ表示されると想定していました。

これを修正するために使用できる別の効果はありますか? または、div .themedescription が .themedescription1、.themedescription2 などになるように、個々のクラスを生成する必要がありますか?

どうもありがとうございました。あなたのアイデアは大歓迎です。-ジェニーブ

4

1 に答える 1

2

.themedescriptionjQueryコードでは、html/wordpressコードに対するタイプミスです...

jQueryコードで使用.theme-descriptionしてください....ダッシュで...

于 2013-03-04T09:24:50.050 に答える