Question

有没有办法用jquery从顶部到底部删除整个页面？

我想从顶部删除页面开头的ID #wrap。我已经考虑了.animate()函数，但这只会移动整个div而不是来自＆＃34; no-where＆＃34;然后放在正确的地方。

HTML：

<div id="wrap">
    <img id="logo" src="Images/logo.png" alt="Logo">
    <hr id="line"  size="4" color="#09b981" align="center">

    <a id="reach" href="about.html"><img src="Images/Reach.png" alt="Reach"></a>
    <a id="contact" href="contact.html"><img src="Images/contact.png" alt="contact"></a>
    <a id="werk" href="work.html"> <img src="Images/work.png" alt="werk"> </a>
</div>

的CSS：

    #logo
    {
        text-align: center;
        display: block;
        margin: 0 auto;
        margin-top: -1%;
        width:25%;
        height: auto;
        position:relative;
    }

    #line
    {
        margin-top: -4%;
        width: 50%;
    }

    #reach 
    {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 50%;
        position:relative;
    }

    #reach img
    {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 100%;
        height:auto;
    }


  #reach:before {
        content:'Reach';
        color:#fff;
        opacity:0;
        position:absolute;
        width:100%;
        top:50%;
        left:0;
        -webkit-transform:translateY(-50%);
        font-size: 3.0vw;
        font-family: Helvetica; 
        z-index:1;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
    }
    #reach:after {
        content:'';
        color:#fff;
        position:absolute;      
        width:100%;
        height:100%;
        top:0; left:0;
        background:rgba(0,0,0,0.6);
        opacity:0;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
        font-size: 3.0vw;
        font-family: Helvetica;        
    }

    #reach:hover:after, #reach:hover:before 
    {
        opacity:1;
    }

    #contact
    {   
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 23%;
        position:relative;
        float:left;
        margin-top: 1.8%;
        margin-left: 25%;

    }
    #contact img
    {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 100%;
        height:auto;
    }

    #contact:before {
        content:'Contact';
        color:#fff;
        opacity:0;
        position:absolute;
        width:100%;
        top:50%;
        left:0;
        -webkit-transform:translateY(-50%);
        font-size: 3.0vw;
        font-family: Helvetica; 
        z-index:1;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
    }
    #contact:after {
        content:'';
        color:#fff;
        position:absolute;      
        width:100%;
        height:100%;
        top:0; left:0;
        background:rgba(0,0,0,0.6);
        opacity:0;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
        font-size: 3.0vw;
        font-family: Helvetica;        
    }

    #contact:hover:after,#contact:hover:before 
    {
        opacity:1;
    }

    #werk
    {   
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 23%;
        position:relative;
        float:left;
        margin-top: 1.8%;
        margin-left: 4%;

    }
    #werk img
    {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 100%;
        height:auto;
    }
    #werk:before {
        content:'Work';
        color:#fff;
        opacity:0;
        position:absolute;
        width:100%;
        top:50%;
        left:0;
        -webkit-transform:translateY(-50%);
        font-size: 3.0vw;
        font-family: Helvetica; 
        z-index:1;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
    }
    #werk:after {
        content:'';
        color:#fff;
        position:absolute;      
        width:100%;
        height:100%;
        top:0; left:0;
        background:rgba(0,0,0,0.6);
        opacity:0;
        transition: all 0.8s;
        -webkit-transition: all 0.8s;
        font-size: 3.0vw;
        font-family: Helvetica;        
    }

    #werk:hover:after,#werk:hover:before 
    {
        opacity:1;
    }

    #holder {
    position: absolute;
    top: 200px;
    left: 100px;   
    }

    #dropDiv {
    display: none;
    position: absolute;
    top: -20px;
    background: #ccc; 
    }

Answer 1

我肯定会这样做：

   $.fn.drop = function( duration , delay ){
   if(typeof delay == "undefined"){ var delay = 1; }
   if(typeof duration == "undefined"){ var duration = 500; }
   var o = $(this);
   o.css({"position":"absolute","top":-Math.ceil(parseInt(o.outerHeight()))});
   setTimeout( function(){ 
    o.animate({"top":"0"},duration);
   } ,delay);
   }

使用这个jQuery函数，说：

$(window).load(function(){ $("#wrap").drop( 1000, 1000 ); });

会降低它，我想：）

Answer 2

这是使用scrollTop和offset

通过jquery从上到下删除整个页面的方法

$（＆＃34; body，html＆＃34;）。animate（{scrollTop：$（＆＃39; #wrap＆＃39;）。offset（）。top}，800）;

Answer 3

你可以这样做：

CSS：

#dropit {
    position:relative;
    display:none;
}

jQuery的：

<script type="text/javascript">
    $(document).ready(function(){
        $('#dropit').each(function(){        
            $(this).css('top',-($(this).outerHeight())).show().animate({'top':'0px'}, {duration:1000});
        });
    });
</script>

演示：

http://jsfiddle.net/2FhLz/

使用jquery从顶部删除整个页面

3 个答案: