使用jQuery从右到左滑动DIV

I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/

我正在使用jQuery代码在加载时从左到右为div设置动画,然后通过单击关闭按钮,div从右到左隐藏。它工作正常,它不是水平向左,而是对角线。我究竟做错了什么?这是我正在使用的代码示例http://jsfiddle.net/N8NpE/2/

$(function(){
    $("#content-box").hide(0).delay(0).show(500);
});

$(function(){
    $("#ClosePanel").click(function () {
        $("#content-box").hide("slow");
    });
});

Any help will be greatly appreciated.

任何帮助将不胜感激。

3 个解决方案

#1

You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.

您可以尝试使用.animate()而不是.hide()和.show()。这样可以让您更好地控制一切。

$("#content-box").animate({'width': 240},500);

And to close, include a callback function to set display to none after the animation:

并关闭,包括一个回调函数,在动画后将显示设置为none:

$("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});

http://jsfiddle.net/N8NpE/6/

#2

You should include jQuery UI in your script and change your function a little bit:

您应该在脚本中包含jQuery UI并稍微更改一下您的函数:

$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
        direction: 'left'
    }, 1000);
});

Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/

这是一个更新的jsfiddle:http://jsfiddle.net/N8NpE/4/

#3

$('#content-box').animate({width: 'toggle'});

http://jsfiddle.net/U7wGt/

#1