如何将元素滑动到一起？

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

前两个对比度和对比度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; 
    }); 

});

来源

2013-03-13 Aerovistae

之前更新了小提琴，错误的链接。 – Aerovistae 2013-03-13 20:36:26

你想要做这样的事吗？ http://jsfiddle.net/JzRsG/ – 2013-03-13 20:51:53

再次回到原来的位置，是的！这是怎么回事... – Aerovistae 2013-03-13 20:52:18

这让你关闭。正如你所看到的，你不必这么努力。 :-)

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; 
    } 
});

下面是一个不依赖于标识，每种箱滑块变体（更新为使用类，而不是增值经销商）：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-13 21:00:08 isherwood

更新为修复页边距。 – isherwood 2013-03-13 21:07:07

基于你的小提琴，我可以接近于这个工作，但有一个奇怪的错误 - 看这里，在这种情况下，前两个现在都有工作滑块，但点击后，激活另一个，你必须点击两次。为什么在地球上？ http://jsfiddle.net/7vwcz/13/ – Aerovistae 2013-03-13 21:59:21

哦，我忘了为每个滑块创建变量。他们都使用同一个！我相信你可以处理，对吧？ – isherwood 2013-03-13 23:24:07

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

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

来源

2013-03-13 21:36:21

如何将元素滑动到一起？

回答

相关问题