[英]Slide DIV Right to Left with jQuery
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. 我正在使用jQuery代码在加载时从左到右为div设置动画,然后通过单击关闭按钮,div从右到左隐藏。 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/ 这是我正在使用的代码示例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. 任何帮助将不胜感激。
You could try using .animate()
instead of .hide()
and .show()
. 你可以尝试使用.animate()
代替.hide()
和.show()
This will give you a little more control over everything. 这样可以让您更好地控制一切。
$("#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');
});
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/
$('#content-box').animate({width: 'toggle'});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.