Hello,
I have this script that will start a little animation. I have 3 different div's where I want this effect to happen if that div is hover. So if you hover over number 2 only number 2 will do the effect. At the moment if you have 1,2 or 3 they will all do the animation. So how can I make this work that it only will happen with the one you hover?
I can solve it with giving every div a different number, but than I have to write the javascript part 3 times, I think you can do it easier.
So how do I change this script, so it will only play the animation if you hover over that specific div.
HTML Code:<div class="menuApp" style="background-color:rgb(125,255,0);font-size:50px;"> <div class="menuAppHover">Catagories</div> </div> <div class="menuApp" style="background-color:rgb(255,50,240);font-size:40px;"> <div class="menuAppHover">Catagories</div> </div> <div class="menuApp" style="background-color:rgb(235,30,15);font-size:50px;"> <div class="menuAppHover">Catagories</div>HTML Code:$(".menuApp").hover(function () { $(".menuAppHover").animate( { 'margin-top' : '-25px' },500); },function () { $(".menuAppHover").animate( { 'margin-top' : '0px' },200); } ); $(".menuAppHover").hover(function () { $(".menuAppHover").animate( { 'margin-top' : '-200px', 'border-top-left-radius' : '35px', '-moz-border-top-left-radius' : '35px', 'border-bottom-right-radius' : '35px', '-moz-border-bottom-right-radius' : '35px' },500, function () { $(".menuAppHover").css("position","relative"); }); },function () { $(".menuAppHover").css("position","static"); $(".menuAppHover").animate( { 'margin-top' : '0px', 'border-top-left-radius' : '0px', '-moz-border-top-left-radius' : '0px', 'border-bottom-right-radius' : '0px', '-moz-border-bottom-right-radius' : '0px' },200); } );


Reply With Quote
Bookmarks