0

http://jsfiddle.net/7vwcz/

そこで、ツールバーに一連のアイコンを作成しようとしています。ここでは、小さな色付きの四角で表されています。

最初の 2 つ、Contrast と Contrast2 には、制御用のポップアウト スライダーがあります。アイコンをスライダーの邪魔にならないようにスムーズに動かしてから、スムーズに元の位置に戻そうとしています。何が起こっているかを確認できるように、アニメーションを低速に設定しています。ご覧のとおり、これらの動きは不規則で正しくありません。赤い四角をクリックすると、その動作を確認できます。

私は何を間違っていますか？

 $('#contrastSlider').slider();
 $('#contrastSlider').hide()
 $('#contrast').click(function () {

     var cs = $('#contrastSlider'),
         w = cs.outerWidth(true);
     if (!cs.is(':visible')) {
         $('#about').css('margin-left', -w + 40);
         $('#contrast2').css('margin-left', -w);
         w = 0;
     }

     cs.toggle("slide", 2000);

     $('#contrast2').animate({
       'margin-left': -w
       }, 2000, function() {
         this.style.marginLeft = 0;
     });

     $('#about').animate({
         'margin-left': -w + 40
       }, 2000, function() {
         this.style.marginLeft = 0;
     });

 });
4

2 に答える 2

2

この回答で私のコメントについて詳しく説明します。

html 構造:

<ul>
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
</ul>

メニュー ボックスとスライダー バーを含む単純なリスト。フローは次のとおりです。ユーザーがボックスをクリックすると、ボックスの右側のスライダーが にスライドし200px、残りは にスライドし0pxます。

JS:

$('.box').click(function() {
    // get the next li, it will be an slider because this is an .box li
    $slider = $(this).next();

    // animate all sliders to 0px width. so hiding all the sliders
    $('.slider').stop().animate({ width: '0px' }, 300);

    // do we have an slider? #about box doesn't 
    if($slider != null) {
        // the other sliders are still in the 'hiding' animation, but now we say to this slider to stop that animation and now to animate to 200px width 
        $slider.stop().animate({ width: '200px' }, 300);
    }
});

JsFiddle の例

于 2013-03-13T21:36:21.533 に答える