JQuery hover multiple elements one function -
JQuery hover multiple elements one function -
i have 3 divs hidden inner divs, when rollover on each div inner div should display , when rollout hides again.
for example, rollover div1, div1 inner appears, rollout, div1 inner disappears.
however when move mouse div1 straight on div2, both treated rollout, eg div1 inner disappears (as should), div2 inner appears(as should) instantly disappears div1 inner.
apart writing separate functions div1 2 , 3 i'm not sure do, help much appreciated!!
jsfiddle.net/user1688604/uzpeh/3
var box = $("#box1,#box2,#box3"); var inner = $(".item"); $(box).hover(function() { $(this).find(inner).stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400); }, function() { $(this).find(inner).stop(true,true).animate({"top":"-20px", "opacity": "0"},400, function() { $(inner).css({"left":"-9999px", "top":"0"}); }); }); <div id="box1"> <div class="item"></div> </div> #box1, #box2, #box3 { width: 300px; float: left; margin-right: 20px; position: relative; } .item { width: 151px; height: 49px; padding: 5px 10px 0; opacity: 0; position: absolute; top: 0; left: -9999px; }
add class box divs (same class each)
<div id="box1" class="box"> <div class="item"></div> </div>
jquery
$(".box").hover(function(){ $(this).find(".item").stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400); },function(){ $(this).find(".item").animate({"top":"-20px", "opacity": "0"},400, function() { $(this).css({"left":"-9999px", "top":"0"}); }); });
jquery hover
Comments
Post a Comment