从右向左滑动?

我怎么能有一个div从折叠到展开(反之亦然)，但这样做从右到左?

我在外面看到的大部分东西都是从左到右的。

991667 次浏览
小开 
$("#slide").animate({width:'toggle'},350);

参考:https://api.jquery.com/animate/

小开
这可以在本地使用jQueryUI隐藏/显示方法实现。 如:< / p > 
    // 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

小开

我是这样做的:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

注意，节点“btn”应该在动画之前隐藏，您可能还需要为它设置“position: absolute”。

小开

用这个:

$('#pollSlider-button').animate({"margin-right": '+=200'});

现场演示

改进版本

演示中添加了一些代码，以防止双击http://jsfiddle.net/XNnHC/942/时出现双边距

轻松使用它;)

http://jsfiddle.net/XNnHC/1591/

  • 删除了额外的JavaScript代码。

  • 类名&一些CSS代码更改

  • 增加了查找是否展开或折叠的功能

  • 改变了是否使用缓和效果

  • 改变动画速度

http://jsfiddle.net/XNnHC/1808/

小开

使用这个

<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>
小开
看看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。

增加白色背景和左填充只是为了更好的效果呈现。

小开

你可以先定义元素的宽度为0，右浮动，然后在你要显示它的事件上。就像这样

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

就这么简单。

小开

GreenSock Animation Platform (GSAP) . with TweenLite / 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文档 < /强> < / p > 根据他们的网站: “TweenLite是一个非常快速、轻量级、灵活的动画工具，是GreenSock动画平台(GSAP)的基础。”< / em >

小开

一个从右到左动画的例子没有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>

小开

请看这里的例子。

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

小开

另一个值得一提的库是animate.css。它可以很好地与jQuery一起工作，您可以简单地通过切换CSS类来制作许多有趣的动画。

像. .

$(" #滑”).toggle()。toggleClass(“动画bounceInLeft”);

小开 
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
小开

我用滚动做的一个例子(只是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);
小开

或者你可以用

$('#myDiv').toggle("slide:right");
小开
我在尝试为小屏幕尺寸的菜单编码时遇到了类似的问题。 我采用的解决方案是将它从视口中移除

我使用SASS和JQuery(没有JQuery UI)，但这都可以在原生JS和CSS中实现。

< a href = " https://codepen。io/maxbethke/pen/oNzMLRa" rel="nofollow noreferrer">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>


提交答案