如何使div從右向左滑動

Question

從某人那里得到了一個代碼....

我喜歡的是將滑動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/

Answer 1

您可以使用jQueryUI和其他效果Slide

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/

好的，創造了另一個小提琴餅干

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

Answer 2

不依賴於JQuery-UI

您需要將內容<div>放在包裝器<div>滑動。 然后，將內容div的右邊距設置為負寬度。 包裝器<div>的技巧是將其x-overflow設置為隱藏，以便隱藏內容<div> 。 然后，您可以使用jQuery的native 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;
}

JavaScript的：

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

這是一個使用句柄<div>擴展和折疊div的演示： http ： //jsfiddle.net/gingi/KUCaL/

Answer 3

從右到左，左右滑動的幻燈片

<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

Answer 4

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

Answer 5

你試過這個嗎？

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