Jquery 用按钮左右滑动

Question

我正在创建一个简单的 jquery 幻灯片。当用户单击按钮 1 div 时，框将显示在右侧，一个将隐藏在左侧。这是我的代码，但是在这个代码中，当我单击按钮时，所有 div 从右向左移动，但其中 none 隐藏在左侧。

<!DOCTYPE html>
<html>
<head>
    <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    .row{
        max-height: 40px;
        overflow: hidden;
        background-color: pink;
    }
    .col-md-4{
        border: 10px solid #eee;
    }
    </style>

</head>
<body>


<div class="container">
<div class="row">
    <div class="col-md-4">gh</div>
    <div class="col-md-4">gh</div>
    <div class="col-md-4">gh</div>
    <div class="col-md-4">gh</div>
    <div class="col-md-4">gh</div>
    <div class="col-md-4">gh</div>
</div>

<button>Click</button>
</div>



<script type="text/javascript">
    $('button').click(function(){
    $(".col-md-4").next().animate({width:'toggle'},2000);
});
</script>


</body>
</html>

Answer 1

我希望这是你想要的（而不是我误解的东西）

基本上，下面的 fiddle 使显示的 div 在您单击 button 时向左滑动消失，而下一个从右侧显示。

Fiddle

此致

Jquery 用按钮左右滑动

Jquery slide left right with button

html

jquery

slide