Question

这是我第一次尝试使用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()
...

Answer 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);
});

Answer 2

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

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

FIDDLE

Ajax / jQuery在hover（）上显示/隐藏.element：引用悬停的包装器？

2 个答案: