如何使div从右向左滑动

got a code here from someone....

从一个人的代码....

what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.

我喜欢的是从右到左滑动div，我的意思是它隐藏了右边的div然后慢慢地滑到左边300像素的宽度。

HTML

HTML

<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>

CSS

CSS

#loginPanel {
    color: #000;
    cursor:pointer;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

Jquery

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');
        }
    });
});

Please need help on this one. just to make the div slide right to left

在这个问题上，你需要帮助。让div从右向左滑动

here is the fiddle http://jsfiddle.net/7m7uK/195/

这是小提琴http://jsfiddle.net/7m7uK/195/

5 个解决方案

#1

You can use jQueryUI and additional effects Slide

你可以使用jQueryUI和附加效果幻灯片

http://docs.jquery.com/UI/Effects/Slide

http://docs.jquery.com/UI/Effects/Slide

Example:

例子:

$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);

You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:

您不能使用.slideToggle()从左向右滑动，或者相反，从http://api.jquery.com/slideToggle/:

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

. slidetoggle()方法激活匹配元素的高度。这导致页面的下部上下滑动，显示或隐藏条目。如果元素最初显示，它将被隐藏;如果隐藏，它将被显示。

You should try and change your code to implement this code, but I think it's maybe better if you try with @s15199d answer, than you don't need to use jQueryUI

您应该尝试修改代码来实现这段代码，但是我认为如果您尝试使用@s15199d答案，可能比不需要使用jQueryUI要好

Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:

我创建了jsfiddle，你必须包含jQueryUI才能工作，你有不同的幻灯片方向组合:

http://jsfiddle.net/7m7uK/197/

http://jsfiddle.net/7m7uK/197/

Ok, created another fiddle with cookies

好的，用饼干做了另一个小提琴

http://jsfiddle.net/7m7uK/198/

http://jsfiddle.net/7m7uK/198/

#2

Without depending on JQuery-UI

没有根据jquery ui

You need to place the content <div> you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div> is to have its x-overflow set to hidden so that it hides the content <div>. You can then use jQuery's native animate() routine to set the right margin to 0 to make the content <div> appear with a horizontal sliding effect.

您需要将内容

放置到包装器

中。然后，将content div的右边框设置为负宽度。包装器

的诀窍是将其x-overflow设置为隐藏，以便隐藏内容

。然后可以使用jQuery的native - animate()例程将右边缘设置为0，以使内容

具有水平滑动效果。

HTML:

HTML:

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

CSS:

CSS:

#slider-wrapper {
    overflow-x: hidden;
}
#slider-content {
    width:         300px;
    margin-right: -300px;
}

JavaScript:

JavaScript:

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

Here's a demo that uses a handle <div> to expand and collapse a div: http://jsfiddle.net/gingi/KUCaL/

下面的演示使用句柄

展开和折叠div: http://jsfiddle.net/gingi/KUCaL/

#3

SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT

幻灯片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:

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:

JS:

  $(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

http://www.themeswild.com/read/slide-navigation-left-to-right

http://www.themeswild.com/read/slide-navigation-left-to-right

#4

$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");

#5

Have you tried this ?

你试过这个吗?

if ($.cookie('panel') == 'open'){    
    $('#userNav').slideLeft('fast');
} else {
    $('#userNav').slideRight('fast');
}