2

したがって、Webアプリのツールバーに一連のfloat:leftdiv要素があります。それらの1つをクリックすると、jQueryスライディングアニメーションを介して右に展開されます。このdivの右側にあるすべてのdivは、サイズを大きくするためのスペースを空けるためにスライドする必要がありますが、代わりに、新しい位置にジャンプしてスペースを空けてから、もう一度縮小すると元に戻ります。これをスムーズなスライドに修正するにはどうすればよいですか?

.animate()が必要だと思いますが、position:absoluteに変更しないとどうすればよいかわかりません。これは、使用したくありません。

4

1 に答える 1

5

私はあなたを完全に理解しているかどうかはわかりませんが、私の推測は次のとおりでした:

http://jsfiddle.net/QvCyx/

 $('#contrast').click(function () {
     var w = $('#contrastSlider').width();
     $('#contrastSlider').toggle("slide", 300);
     $('#about').animate({
         'margin-left': -w
     }, 300, function () {
         this.style.marginLeft = 0;
     });
 });


アップデート

これが全体です:http: //jsfiddle.net/CPR7R/

 $('#contrast').click(function () {
     var cs = $('#contrastSlider'),
         w = cs.width();
     if (!cs.is(':visible')) {
         $('#about').css('margin-left',-w);
         w = 0;
     }
     cs.toggle("slide", 300);
     $('#about').animate({
         'margin-left': -w
     }, 300, function () {
         this.style.marginLeft = 0;
     });
 });


2回目の更新

この例を確認してください:http://jsfiddle.net/EpCpr/

$('#container').on('click', '.slideTriggerer', function () {
    var that = $(this),
        sliderA = that.siblings('.slideA'),
        sliderB = that.siblings('.slideB'),
        defml = parseInt( sliderB.css('margin-left') ),
        w = sliderA.outerWidth();
    if (!sliderA.is(':visible')) {
        sliderB.css('margin-left', -w+defml);
        w = defml;
    }

    sliderB.animate({
        'margin-left': -w+defml
    }, 300, function () {
        sliderB.css('margin-left', defml);
    });
    sliderA.toggle("slide", 300);
});
于 2013-03-12T21:50:37.573 に答える