1

这是我在 jQuery/ajax 中的第一次尝试，我遇到了麻烦。

这是我的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>

工作正常，但我不知道如何与第二个包装器（#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 回答