我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
我是这样做的:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
注意,节点“btn”应该在动画之前隐藏,您可能还需要为它设置“position: absolute”。
其他回答
看看这个使用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。
增加白色背景和左填充只是为了更好的效果呈现。
我用滚动做的一个例子(只是HTML, CSS和JS,只是用jquery库)。向下滚动时,按钮将向左滑动。
另外,如果你只想要这种效果,我建议你不要使用jQuery UI,因为它太沉重了(如果你只是想使用它)。
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
检查这个例子
另一个值得一提的库是animation .css。它可以很好地与jQuery一起工作,您可以简单地通过切换CSS类来制作许多有趣的动画。
像. .
$(“#slide”).toggle().toggleClass('animation bounceInLeft');
在尝试为小屏幕尺寸的菜单编写代码时,我遇到了类似的问题。 我的解决方案是把它从视口中赶走。
我使用SASS和JQuery(没有JQuery UI),但这都可以在原生JS和CSS中实现。
https://codepen.io/maxbethke/pen/oNzMLRa
var menuOpen = false var init = () => { $(".menu__toggle, .menu__blackout").on("click", menuToggle) } var menuToggle = () => { console.log("Menu:Toggle"); $(".menu__blackout").fadeToggle(); if(menuOpen) { // close menu $(".menu__collapse").css({ left: "-80vw", right: "100vw" }); } else { // open menu $(".menu__collapse").css({ left: "0", right: "20vw" }); } menuOpen = !menuOpen; } $(document).ready(init); .menu__toggle { position: absolute; right: 0; z-index: 1; } .menu__blackout { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; } .menu__collapse { position: absolute; top: 0; right: 100vw; bottom: 0; left: -80vw; background: white; -webkit-transition: ease-in-out all 1s; transition: ease-in-out all 1s; z-index: 11; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="menu__toggle">Toggle menu</button> <menu class="menu"> <div class="menu__blackout"></div> <div class="menu__collapse"> <ul class="list"> <li class="list__item"> <a class="list__item__link" href="#section1">Menu Item 1</a> </li> <li class="list__item"> <a class="list__item__link" href="#section2">Menu Item 2</a> </li> <li class="list__item"> <a class="list__item__link" href="#section3">Menu Item 3</a> </li> <li class="list__item"> <a class="list__item__link" href="#section4">Menu Item 4</a> </li> <li class="list__item"> <a class="list__item__link" href="#section5">Menu Item 5</a> </li> </ul> </div> </menu>
用这个:
$('#pollSlider-button').animate({"margin-right": '+=200'});
现场演示
改进版本
演示中添加了一些代码,以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/
轻松使用它;)
http://jsfiddle.net/XNnHC/1591/
删除了额外的JavaScript代码。 类名和一些CSS代码更改 增加了查找是否展开或折叠的功能 改变了是否使用缓和效果 改变动画速度
http://jsfiddle.net/XNnHC/1808/