2

両方とも幅が 500px の 2 つの div を並べて作成しようとしています。次に、div の 1 つを超えると、ホバーされた div は幅 800px に拡張され、もう 1 つの div は 200px のサイズに縮小されます。

現在、div の 1 つを拡張することができましたが、同時に他の div を縮小する方法がわかりません。

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

3 に答える 3

1

このようなもの？

$('.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 () { });
})​

ここにサンプル

于 2012-10-11T16:08:06.017 に答える
1

これらの線に沿った何か。これよりもスマートなセレクターを使用できます。(たとえば、sibling-div を取得するなど)。

$('.companybox1').hover(
    function () { 
        $(this).animate({ width: '+=300' }, 750, function () { }); 
        $('.companybox2').animate({ width: '-=300' }, 750, function () { });
    }
 )
于 2012-10-11T16:02:37.013 に答える
0

この例を参照してください..それは役に立ちますか?

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-11T16:13:41.727 に答える