如何使div从右向左滑动
Posted
技术标签:
【中文标题】如何使div从右向左滑动【英文标题】:how to make div slide from right to left 【发布时间】:2013-03-17 12:49:44 【问题描述】:从某人那里得到了一个代码......
我喜欢的是让滑动的 div 从右滑到左,我的意思是它把 div 隐藏到右边,然后慢慢地向左滑动 300px 宽度。
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
CSS
#loginPanel
color: #000;
cursor:pointer;
#userNav
width: 200px;
height: 200px;
display: none;
background: #ff0000;
jQuery
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open')
$('#userNav').slideDown('fast');
else
$('#userNav').slideUp('fast');
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function()
$('#userNav').slideToggle('fast', function()
if ($(this).is(':hidden'))
$.cookie('panel', 'closed');
else
$.cookie('panel', 'open');
);
);
请在这方面需要帮助。只是为了让 div 从右向左滑动
这是小提琴http://jsfiddle.net/7m7uK/195/
【问题讨论】:
195
你值得我永远尊重。
但是,对于一个专门从事同一个小提琴工作的人,你为什么不切换到 jQuery 1.9.1?
***.com/q/596608/1577396的可能重复
也看看这个链接***.com/q/4229422/1577396
【参考方案1】:
你可以使用jQueryUI和附加效果幻灯片
http://docs.jquery.com/UI/Effects/Slide
例子:
$('#userNav').hide("slide", direction: "left" , 1000);
$('#userNav').show("slide", direction: "right" , 1000);
你不能使用 .slideToggle() 从左到右滑动,反之亦然,从http://api.jquery.com/slideToggle/:
.slideToggle() 方法为匹配元素的高度设置动画。 这会导致页面的下部向上或向下滑动,看起来 显示或隐藏物品。如果元素最初被显示,它 将被隐藏;如果隐藏,就会显示出来。
您应该尝试更改您的代码以实现此代码,但我认为如果您尝试使用@s15199d 答案可能会比您不需要使用jQueryUI 更好
好的,我创建了 jsfiddle,你必须包含 jQueryUI 才能工作,你有不同的滑动方向组合:
http://jsfiddle.net/7m7uK/197/
好的,用 cookie 创建了另一个小提琴
http://jsfiddle.net/7m7uK/198/
【讨论】:
感谢您的回答,可以,但我如何在其中应用 cookie? :-( 抱歉,因为我想在打开或关闭时保存它的状态。【参考方案2】:不依赖JQuery-UI
您需要将内容<div>
放置在包装器<div>
中。然后将内容 div 的右边距设置为其负宽度。包装器<div>
的技巧是将其x-overflow
设置为隐藏,以便隐藏内容<div>
。然后可以使用jQuery原生的animate()
例程将右边距设置为0,使<div>
的内容出现水平滑动效果。
HTML:
<div id="slider-wrapper">
<div id="slider-content">
</div>
CSS:
#slider-wrapper
overflow-x: hidden;
#slider-content
width: 300px;
margin-right: -300px;
$("#slider-button").click(function ()
$("#slider-content").animate( "margin-right": 0 , "slow");
);
这是一个使用句柄 <div>
展开和折叠 div 的演示:
http://jsfiddle.net/gingi/KUCaL/
【讨论】:
【参考方案3】:从右到左和从左到右滑动 DIV
<div class="nav ">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS:
/*nav*/
.nav
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
.nav-view
transform: translateX(0);
JS:
$(document).ready(function()
$('a#click-a').click(function()
$('.nav').toggleClass('nav-view');
);
);
http://www.themeswild.com/read/slide-navigation-left-to-right
【讨论】:
【参考方案4】:$("#DivName").animate("left": "-=300px", "opacity":1, "slow");
【讨论】:
你好,但我不擅长这个,你能用你的工作代码更新小提琴吗,这对我很有帮助,谢谢【参考方案5】:你试过了吗?
if ($.cookie('panel') == 'open')
$('#userNav').slideLeft('fast');
else
$('#userNav').slideRight('fast');
【讨论】:
slideLeft()
和 slideRight()
默认不是 jQuery 的一部分,请参阅 documentation
对不起,我认为这是可能的......请参阅此找到解决方案:docs.jquery.com/UI/Effects/Slide以上是关于如何使div从右向左滑动的主要内容,如果未能解决你的问题,请参考以下文章
Android 中的两部分过渡动画:将一个 textview 向左滑出,并从右侧引入另一个
从右向左滑动时未调用 UISplitViewControllerDelegate/UIPopoverDelegate 方法