Question

所以我试图在工具栏中制作一系列图标，这里用小方块表示。

前两个，对比度和对比度2，将有用于控制事物的弹出滑块。我只是想让图标顺利移动滑块，然后顺利地回到原位。我现在将动画设置为低速，以便我们可以看到正在发生的事情。正如您所看到的，它们移动不正常而且不正确 - 您可以通过单击带红色的方块来查看操作。

我做错了什么？

 $('#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;
     });

 });

Answer 1

我将在这个答案中更多地解释我的评论。

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 example

Answer 2

这会让你接近。如你所见，你不必那么努力。： - ）

http://jsfiddle.net/7vwcz/10

var isOut = 0;

$('#contrast').click(function () {
    if (isOut == 0) {
        $('#contrastSlider').animate({width: 75, marginRight: '10px'}, 'slow');
        isOut = 1;
    } else {
        $('#contrastSlider').animate({width: 0, marginRight: '0'}, 'slow');
        isOut = 0;
    }
});

这是一个不依赖于ID的变体，每个框都有一个滑块（更新为使用类而不是变量）：http://jsfiddle.net/7vwcz/14

$('.cube').click(function () {
    if ($(this).hasClass('out')) {
        $(this).removeClass('out').next('.flag').animate({width: 75, marginRight: '10px'}, 'slow');
    } else {
        $(this).addClass('out').next('.flag').animate({width: 0, marginRight: '0'}, 'slow');
    }
});

如何将元素一起滑动？

2 个答案: