jQuery .slideRight 效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4229422/
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
jQuery .slideRight effect
提问by Webnet
I need for a div tag to slide out on the right side of the screen, how do I get this effect with jQuery? I've been looking here: http://api.jquery.com/category/effects/sliding/and it doesn't seem to be what I'm looking for...
我需要一个 div 标签在屏幕右侧滑出，我如何使用 jQuery 获得这种效果？我一直在看这里：http: //api.jquery.com/category/effects/sliding/它似乎不是我要找的...
回答by David says reinstate Monica
If you're willing to include the jQuery UIlibrary, in addition to jQuery itself, then you can simply use hide(), with additional arguments, as follows:
如果除了 jQuery 本身之外，您还愿意包含jQuery UI库，那么您可以简单地使用hide()，以及附加参数，如下所示：
$(document).ready(
function(){
$('#slider').click(
function(){
$(this).hide('slide',{direction:'right'},1000);
});
});
Without using jQuery UI, you could achieve your aim just using animate():
在不使用 jQuery UI 的情况下，您只需使用animate()以下内容即可实现您的目标：
$(document).ready(
function(){
$('#slider').click(
function(){
$(this)
.animate(
{
'margin-left':'1000px'
// to move it towards the right and, probably, off-screen.
},1000,
function(){
$(this).slideUp('fast');
// once it's finished moving to the right, just
// removes the the element from the display, you could use
// `remove()` instead, or whatever.
}
);
});
});
If you do choose to use jQuery UI, then I'd recommend linking to the Google-hosted code, at: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js
如果您确实选择使用 jQuery UI，那么我建议您链接到 Google 托管的代码，网址为：https: //ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min。 js
