1

これは、jQuery/ajax での私の最初の試みの 1 つであり、ジャムがあります。

これが私のHTMLコードです...

<div id="level_1_description" class="level_description wrapper">
    <h2><a href="#">Food</a></h2>
    <strong>..to have a good taste</strong>
    <p class="description"><span class="text">You want to eat healthy food.</span></p>
</div>

...そして、アニメーション化されたホバー アクションのスクリプト: .level_descriptionコンテナー内の.description要素を表示/非表示にします。

<script>
$('.level_description').hover(function(){
    $('.description').animate({height:$('.text').height()},100);
  },
  function () {
    $('.description').animate({height:1},100);
  }
);

</script>

正常に動作していますが、2 番目のラッパー (#level_2_description) から分離する方法がわかりません。魔女には同じ要素 (.level_description、.description) があります。

私はこのようなものを使いたいですか？:

...
$(this.'.description').animate({
  height:$(this.'.text').height()
...
4

2 に答える 2

2

クラス leve_description を使用して、現在ホバーされている要素に基づいて要素を検索します。jqueryfind()を使用して、親要素内の要素を検索できます。

$('.level_description').hover(function(){
    var $levelDescription = $(this);

    $levelDescription.find('.description').animate({height:$levelDescription.find('.text').height()}, 100);
}, function () {
    $(this).find('.description').animate({height:1}, 100);
});
于 2012-10-28T02:24:18.923 に答える
0

セレクターでコンテキストを使用し、三項を使用してそのような単純なアニメーションを切り替えます。

$('.level_description').on('mouseenter mouseleave', function(e) {
    $('.description', this).animate({
        height: e.type=='mouseenter' ? $('.text', this).height() : 1
    },100);
});

フィドル

于 2012-10-28T03:02:01.860 に答える