Ajax/jQuery在懸停（）上顯示/隱藏.element：引用懸停包裝？

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