如何使div从右向左滑动

Posted

技术标签:

【中文标题】如何使div从右向左滑动【英文标题】:how to make div slide from right to left 【发布时间】:2013-03-17 12:49:44 【问题描述】:

从某人那里得到了一个代码......

我喜欢的是让滑动的 div 从右滑到左,我的意思是它把 div 隐藏到右边,然后慢慢地向左滑动 300px 宽度。

html

<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

您需要将内容&lt;div&gt; 放置在包装器&lt;div&gt; 中。然后将内容 div 的右边距设置为其负宽度。包装器&lt;div&gt; 的技巧是将其x-overflow 设置为隐藏,以便隐藏内容&lt;div&gt;。然后可以使用jQuery原生的animate()例程将右边距设置为0,使&lt;div&gt;的内容出现水平滑动效果。

HTML:

<div id="slider-wrapper">
    <div id="slider-content">
</div>

CSS:

#slider-wrapper 
    overflow-x: hidden;

#slider-content 
    width:         300px;
    margin-right: -300px;

javascript

$("#slider-button").click(function () 
    $("#slider-content").animate( "margin-right": 0 , "slow");
);

这是一个使用句柄 &lt;div&gt; 展开和折叠 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 向左滑出,并从右侧引入另一个

jQuery从右向左滑动

未调用时滑动手势从右向左移动

在Xamarin android中从右向左滑动抽屉

从右向左滑动时未调用 UISplitViewControllerDelegate/UIPopoverDelegate 方法