使用 jQuery 从右向左滑动 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19205370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide DIV Right to Left with jQuery
提问by Mr. Bacan
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.
任何帮助将不胜感激。
回答by Blake Mann
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:
要关闭，请包含一个回调函数以在动画后将 display 设置为 none：
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
回答by Maxim Ershov
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/
回答by Joseph
$('#content-box').animate({width: 'toggle'});
$('#content-box').animate({width: 'toggle'});
