Witam mam taki kod
<script>
$('.li').on({
'mouseover':function(){
$('.img-nav').stop().animate({width:74,height:52,marginLeft:5}, 500);
$('.a-nav').stop().animate({width:74,height:52,padding:10}, 500);
$(this).stop().animate({height:52}, 500);
},
'mouseout' : function() {
$('.img-nav').stop().animate({width:0,height:26,marginLeft:0}, 500);
$('.a-nav').stop().animate({width:158,height:26,padding:0}, 500);
$(this).stop().animate({height:26}, 500);
}
});
i html kawałek tylko tego co potrzeba
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Test2<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="" class="li">
<div class="img-nav"></div>
<p class="a-nav">Test2-1</p>
</a>
</li>
</ul>
</li>
zdj pokazujący jak działa.
gdy najadę na Test2-1
natomiast, gdy dodam kolejne pod struktury menu, to najadę tylko na jeden, a animują się wszystkie. Jak dokonać tego, aby animowało się to na które najeżdżam?