Jquery 显示切换div的一部分，然后单击该部分以显示整个div

我使用的是“切换”幻灯片效果，希望显示div的一部分，用户可以单击该部分来显示整个div。我现在的解决方案的问题是，触发“切换”时，单击此处会从左向右跳。我想找到一个解决方案，当触发“切换”时，单击此处会随着幻灯片动画从左到右逐渐移动

到目前为止，这是我的jQuery脚本：

$('#click_here').click(function() {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#info_box').toggle(effect, options, duration);
     return false;
});

这是我的html

<div id="wrap">
    <div id="click_here">
        <p>Click here!</p>
    </div>
    <div id="info_box">
        <h1>Here is some cool info!</h1>
    </div>
</div>

---

谢谢大家!

jQuery UI滑动切换的工作方式似乎是在元素周围插入一个包装器，并对元素的

左

位置设置动画。但是，包装器占据了最后一个元素的全部宽度，因此“单击按钮”会立即向右移动。（有关解决方法，请参见。）

您可以使用jQuery设置CSS页边距的动画，而不是使用这种切换效果

#wrap {
    ...
    overflow:hidden;     /* hide overflowing content */
}

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;      /* move the element out of sight
}

然后使用单击处理程序将

左边距
设置为“0px”：



编辑：
另一种方法是让CSS处理动画，只需使用jQuery切换类：

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;

    -webkit-transition-duration:.7s;
    -moz-transition-duration:.7s;
    -ms-transition-duration:.7s;
    -o-transition-duration:.7s;
    transition-duration:.7s;
}

#info_box.show {
    margin-left:0px;
}

然后用jQuery切换“show”类：

$('#click_here').click(function () {
    $('#info_box').toggleClass('show');
    return false;
});

请注意这一点

您能切换div吗？通过这种方式，它从“单击此处”下方滑动，刚才看到了一个非常类似的问题和有趣的答案：
#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;

    -webkit-transition-duration:.7s;
    -moz-transition-duration:.7s;
    -ms-transition-duration:.7s;
    -o-transition-duration:.7s;
    transition-duration:.7s;
}

#info_box.show {
    margin-left:0px;
}

$('#click_here').click(function () {
    $('#info_box').toggleClass('show');
    return false;
});