Анимация по селектору класса через each
Ребят, моя анимация воспроизводиться сразу на всех блоках, а нужно только на том, на который навели. Подскажите плиз в чем ошибка?
<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) }); }) }); |
Цитата:
Цитата:
|
Siend,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .GarantAnimatedBlock { float: left; margin: 15px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".GarantAnimatedBlock").each(function(index, element) { $(element).on( {mouseenter : function(e){ $(this).find(".GarantAnimatedBlockText").animate({"height":"100%"},300,function(){ $(this).find(".GarantAnimatedBlockTextHidden").css({"display":"inline-block"}).animate({"opacity":"1"},300) }) }, mouseleave :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) }); }}) $(element).mouseleave() //вместо css }); }); </script> </head> <body> <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> <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> <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> </html> |
Благодарю)
GarantAnimatedPlace - вокруг всех блоков) |
Часовой пояс GMT +3, время: 14:57. |