Ребят, моя анимация воспроизводиться сразу на всех блоках, а нужно только на том, на который навели. Подскажите плиз в чем ошибка?
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
</div>
$("body").find(".GarantAnimatedPlace").each(function(index, element) {
$(element).hover(
function(e){
$(this).find(".GarantAnimatedBlockText").animate({"height":"100%"},300,function(){
$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"inline-block"}).animate({"opacity":"1"},300)
})
},
function(e){
$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"none","opacity":"0"})
$(this).find(".GarantAnimatedBlockText").each(function(index, element) {
$(element).animate({"height":$(this).find(".GarantAnimatedBlockTextShow").outerHeight(true)+"px"},300)
});
})
});