0

http://jsfiddle.net/7vwcz/

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

前两个，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 回答
1

这让你接近。如您所见，您不必那么努力工作。:-)

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');
    }
});
于 2013-03-13T21:00:08.363 回答