jquery - 滑动/切换 css

Question

有没有办法从左到右滑入和滑出一个div。用户必须点击“clickthis”才能切换。

示例CSS：

.container{width:100px; position:absolute; left:-70px;}
.container .open{left:0px;}
.button{display:block; top:0px; right:0px; width:20px; height:20px;position:relative;

示例 HTML：

<div class="container" id="slide1">
    <div class="button" id="clickthis"></div>
</div>

Answer 1

您可以使用show()和hide()滑入和滑出您的元素

例如：

$("<your-element>").show("slide", { direction: "left" }, 100);

和

$("<your-element>").hide("slide", { direction: "left" }, 100);

有关更多详细信息，请参阅此问题。

您可以查看本教程以学习在不同方向上滑动元素。

Answer 2

你可以使用它（但你需要 jQuery）：

$('#clickthis').click(function() {
    $('#slide1').toggleClass('open');
});

Answer 3

是的，但是如果你点击“clickthis”，当div“slide1”关闭时它也会隐藏，对吧？

好吧，如果我理解你的问题，从右向左滑动并关闭 div 你应该实现这样的代码：

$(document).ready(function() {
  $('#clickthis').click(function() {
    $('#slide1').animate({width: 'toggle'});
  });
});

无论如何，对于不同的幻灯片效果有一个很棒的教程：http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions

Answer 4

您可以使用 jQuery 切换功能滑入滑出：-

$( ".button" ).click(function() {
    $( "div" ).toggle( "slide", { direction: "left" }, "slow" );
});

例如请参考：- Jquery Slide in/Slide out