将某个div的宽度增加10％，同时将鼠标悬停在另一个div上

Question

I am trying to achieve the following:

while hovering on a certain div (class="up"), i would like another div (class="bar") increase its width by 10%, and while hovering another div (class="down"), decrease its width (class="bar") by 10%.

I have this so far:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>

<script type="text/javascript">//<![CDATA[ 
$(function(){
 $(".bar").css({
     'backgroundColor': 'red'
 }).hover(function () {
      $(this).stop().animate({
               width: '+=10%'
     }, 350).addClass('shadow');
 }, function () {
     $(this).stop().animate({
         width: '200px'
     }, 350).removeClass('shadow');
 });
});//]]>  

</script>

But as i am quite new to JS, i cant figure out how to amend it to suit my needs. I need it to trigger once i hover a different div then the actual resized div, also i need to use the actual divs with as the .stop().animate width. and i need to have both increase in width (while hovering on div with class "up", and decrease while hovering class "down")

will appreciate your assistance on the matter.

thanks in advance.

Answer 1

the hover listener should be attached to up and down classes not bar

var bar = $('.bar'),
    originalWidth = bar.width();

$('.up').hover(function(){
  changeBarWidth( 1.1 * originalWidth,true);
},function(){
  changeBarWidth(originalWidth,false);
});

$('.down').hover(function(){
  changeBarWidth( .9 * originalWidth ,false);
},function(){
  changeBarWidth(originalWidth,false);
});

function changeBarWidth(x,addShadow){
  bar.stop().animate({
    width: x
  }).toggleClass('shadow',addShadow);
}

http://jsbin.com/mupomilo/1

Answer 2

Your hovering action should be on up, not on the bar itself...

something like:

$(function(){
var $myel = $('.bar');
 $(".up").hover(function () {
  $myel.stop().animate({
           width: '+=10%'
  }, 350).addClass('shadow');
 }, function () {
 $myel.stop().animate({
     width: '200px'
 }, 350).removeClass('shadow');
});
});

Also you should really consider upgrading your jquery version. 1.6 is VERY out of date.