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

Question

我正在努力实现以下目标:

当悬停在某个 div (class="up") 上时，我希望另一个 div (class="bar") 将其宽度增加 10%，而当悬停在另一个 div (class="down") 上时，减少宽度它的宽度 (class="bar") 增加了 10%。

到目前为止我有这个:

<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>

但是由于我对 JS 很陌生，所以我不知道如何修改它以满足我的需要。一旦我将鼠标悬停在不同的 div 然后实际调整大小的 div，我需要它触发，我还需要使用实际的 div 作为 .stop().animate 宽度。我需要同时增加宽度(当鼠标悬停在 div 上时，类“向上”，当鼠标悬停在类“下”时宽度减小)

将感谢您在此事上的协助。

提前致谢。

Answer 1

悬停监听器应该附加到 up 和 down 类而不是 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