我怎样才能使div从折叠状态变为展开状态(反之亦然),而又从右向左移动呢?
我在那里看到的大多数东西总是从左到右。
我怎样才能使div从折叠状态变为展开状态(反之亦然),而又从右向左移动呢?
我在那里看到的大多数东西总是从左到右。
Answers:
$("#slide").animate({width:'toggle'},350);
paddingLeft: 'toggle', paddingRight: 'toggle'
当元素具有内部填充时,您也可以添加。
CSS
看起来更像是真正的幻灯片
overflow: hidden
。
这可以使用jQueryUI隐藏/显示方法本地实现。例如。
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
用这个:
$('#pollSlider-button').animate({"margin-right": '+=200'});
改进版
该演示中已添加了一些代码,以防止双击时出现双重利润:http : //jsfiddle.net/XNnHC/942/
轻松使用它;)
http://jsfiddle.net/XNnHC/1591/
多余的JavaScript代码已删除。
类名和一些CSS代码已更改
添加功能以查找是否展开或折叠
更改是否使用缓动效果
更改的动画速度
看一下Fiddle 上的这个工作示例,该示例使用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。
添加了白色背景和左填充以更好地呈现效果。
我这样做是这样的:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
请注意,节点“ btn”应在动画之前隐藏,并且您可能还需要为其设置“ position:absolute”。
width: 'toggle'
?btn.show().animate({width: 'toggle'}, {duration: 500});
我相信,这就是您所需要的。
另一个值得一提的库是animate.css。它非常适合jQuery,您可以通过切换CSS类来制作许多有趣的动画。
喜欢..
$(“#slide”)。toggle()。toggleClass('animated bounceInLeft');
带有TweenLite
/的 GreenSock动画平台(GSAP)TweenMax
提供了比jQuery或CSS3过渡更为平滑且具有更大自定义性的过渡。为了使用TweenLite / TweenMax为CSS属性设置动画,您还需要使用名为“ CSSPlugin”的插件。TweenMax自动包含此内容。
首先,加载TweenMax库:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
或轻量版本TweenLite:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
然后,调用动画:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
您也可以使用ID选择器来调用它:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
如果您已加载jQuery,则可以使用更高级的广泛选择器,例如包含特定类的所有元素:
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
有关详细信息,请参阅: TweenLite文档
根据他们的网站: “ TweenLite是一种非常快速,轻巧且灵活的动画工具,是GreenSock动画平台(GSAP)的基础。”
您可以先将元素的宽度定义为0,向右浮动,然后在您要显示它的事件上..就像
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
就那么简单。
一个没有jQuery UI的从右到左动画的示例,仅带有jQuery(任何版本,请参阅https://api.jquery.com/animate/)。
$(document).ready(function() {
var contentLastMarginLeft = 0;
$(".wrap").click(function() {
var box = $(".content");
var newValue = contentLastMarginLeft;
contentLastMarginLeft = box.css("margin-left");
box.animate({
"margin-left": newValue
}, 500);
});
});
.wrap {
background-color: #999;
width: 200px;
overflow: hidden;
}
.content {
width: 100%;
margin-left: 100%;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
click here
<div class="content">
I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
</div>
</div>
或者你可以使用
$('#myDiv').toggle("slide:right");
我使用滚动完成的一个示例(仅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)'});
}
});
检查这个例子
如果您div
的位置绝对正确并且知道宽度,则可以使用:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
它将滑出屏幕。
或者,您可以将其包装成一个容器 div
#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}
#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}
<div id="myContainer">
<div id="myDiv">Wheee!</div>
</div>
$('#myDiv').animate({left:'-200'},1000);