如何使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的本机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/