javascript - 如何让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;
}

查询

// 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从右向左滑动

这是 fiddle 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/ :

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.

您应该尝试更改您的代码来实现此代码，但我认为如果您尝试使用 @s15199d 可能会更好回答，而不是你不需要使用 jQueryUI

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

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

好的，用 cookie 创建了另一个 fiddle

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