Question

我目前正在使用JQuery slideDown / slideUp效果，并没有完成我想要的效果。

基本上，我想创建一个动作，我将一个div“推”出浏览器窗口的顶部。

类似的内容

如何使用JQuery执行此操作？

使用slideDown / slideUp的问题是另一个DIV只重叠了我隐藏的div。但相反，我想推动我不想在浏览器窗口顶部看到的div。

Answer 1

制作两个div，一个在另一个内。使用CSS，定义外部高度并设置overflow: hidden。这意味着如果内部div的内容太长，它将是不可见的。

 ____ _____ ____
|    | ooo |    |   <-- this is the outer div
|____|_____|____|
     | xxx |       ooo -> visible
     |_____|       xxx -> invisible

        ^-- this is the inner div

无论你想滑动什么都进入内部div。现在您需要做的就是向上移动内部div：

      _____
     | ooo |
 ____|_____|____
|    | xxx |    |     now, ooo -> invisible
|____|_____|____|          xxx -> visible

这可以使用jQuery的animate函数来完成。

$('#innerDiv').animate({
    top: -50px
});

Answer 2

不确定我是否理解你，但你可以设置它的动画，比如

var pos = $('#myDIV').position();
$('#myDIV').css({
   position:   'absolute',
   left:       pos.left,
   top:        pos.top,       
}).animate({
   top:        '-=400'
},{
   duration:   2000,
   complete:   function(){
      $(this).remove();
   }
});

应该将您的div移出视图并在之后将其删除。如果它不是你想要的你可以希望它适应它。

Answer 3

我想，这就是你要找的东西 http://jsfiddle.net/JuW3B/2/

JQuery：推送效果？

3 个答案: