Ajax/jQuery show/hide .element on hover()：引用悬停的包装器？答案

【问题标题】：Ajax/jQuery show/hide .element on hover(): referring the hovered wrapper?Ajax/jQuery show/hide .element on hover()：引用悬停的包装器？
【发布时间】：2012-10-17 20:03:27
【问题描述】：

这是我在 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()
...

【问题讨论】：

标签： jquery ajax hover jquery-animate jquery-hover

【解决方案1】：

您想根据当前悬停的元素与类 leve_description 查找元素。您可以使用 jquery find() 在父元素中查找元素。

$('.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);
});

【讨论】：

【解决方案2】：

我会在选择器中使用上下文，并使用三元来切换这样一个简单的动画：

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

FIDDLE

【讨论】：