jQuery .slideRight效果

我需要在屏幕右侧滑出div标签，如何使用jQuery获得此效果？ 我一直在这里看： http ： //api.jquery.com/category/effects/sliding/它似乎不是我正在寻找的……

Answer 1

如果您愿意包含jQuery UI库，除了jQuery本身，那么您可以简单地使用hide()和其他参数 ，如下所示：

 $(document).ready( function(){ $('#slider').click( function(){ $(this).hide('slide',{direction:'right'},1000); }); }); 

JS小提琴演示 。

---

不使用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. } ); }); }); 

JS小提琴演示

如果您确实选择使用jQuery UI，那么我建议您链接到Google托管的代码， url为： https ： //ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min。 JS

Answer 2

另一种解决方案是使用.animate（）和适当的CSS。

例如

  $('#mydiv').animate({ marginLeft: "100%"} , 4000); 

JS小提琴