如何擴大和縮小兩個不同的div的一個懸停

我想要兩個div是並列的寬度爲500px。然後，當你在一個div上的div展開寬度爲800px，另一個div縮小到200px的大小。如何擴大和縮小兩個不同的div的一個懸停

目前我已經設法讓其中一個div擴展，但不能解決如何讓其他縮小的同時。

$(function() { 
    $('.companybox1').hover(
     function() { 
      $(this).animate({ width: '+=300' }, 750, function() { }); 
     }, 
     function() { 
      $('.companybox1').animate({ width: '-=300' }, 750, function() { }); 
     }); 
});

來源

2012-10-11 Simbady

@IsaacFife：聞起來像一個答案，我... –

沿着這些線的東西。你可以使用比這個更聰明的選擇器。（例如獲取兄弟姐妹等）。

$('.companybox1').hover(
    function() { 
     $(this).animate({ width: '+=300' }, 750, function() { }); 
     $('.companybox2').animate({ width: '-=300' }, 750, function() { }); 
    } 
)

來源

2012-10-11 16:02:37 RobAu

這樣的事情？

$('.companybox1').hover(function() { 
    $(this).animate({ width: '+=300' }, 750, function() { }) 
      .siblings() 
      .animate({ width: '-=300' }, 750, function() { }); 
}, function() { 
    $(this).animate({ width: '-=300' }, 750, function() { }) 
      .siblings() 
      .animate({ width: '+=300' }, 750, function() { }); 
})

這裏sample

來源

2012-10-11 16:08:06

見這個例子..是它幫助？

http://jsfiddle.net/ZN8bq/

$(function(){ 

    $('.overable').hover(function(){ 
     $(this).animate({ width: '+=300' }, 500); 
     if($(this).hasClass('div1')){ 
      $('.div2').animate({ width: '-=300' }, 500); 
     } else { 
      $('.div1').animate({ width: '-=300' }, 500); 
     } 
    }, function(){ 
     $('.overable').animate({ width: '500px' }, 500); 
    }); 

});

來源

2012-10-11 16:13:41 udidu

如何擴大和縮小兩個不同的div的一個懸停

回答

相關問題