我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
$("#slide").animate({width:'toggle'},350);
参考:https://api.jquery.com/animate/
其他回答
$("#slide").animate({width:'toggle'},350);
参考:https://api.jquery.com/animate/
使用这个
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>
请看这里的例子。
$("#slider").animate({width:'toggle'});
https://jsfiddle.net/q1pdgn96/2/
看看这个使用jQuery UI的小提琴的工作示例。 这是我最初从左到右使用的解决方案,但我将其改为从右到左工作。
它允许用户快速点击链接,而不会破坏可用面板之间的动画。
JavaScript代码很简单:
$(document).ready(function(){
// Mostra e nascondi view-news
var active = "europa-view";
$('a.view-list-item').click(function () {
var divname= this.name;
$("#"+active ).hide("slide", { direction: "right" }, 1200);
$("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
active = divname;
});
});
在Fiddle链接中获取HTML和CSS。
增加白色背景和左填充只是为了更好的效果呈现。
这可以通过使用jQueryUI隐藏/显示方法来实现。 如。
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
参考:http://docs.jquery.com/UI/Effects/Slide