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

有关详细信息，请参阅this question。

您可以查看this tutorial，了解如何向不同方向滑动元素。

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

滑动/切换css

4 个答案: