Hareketli satışta yanlış Yükleme

Animasyonlu bir div var. Benim aldığım sorun, sayfanın her yüklendiğinde sayfanın en üstünde başlaması ve ardından animasyonun başlamasından sonra olması gereken yere atlanmasıdır. İşte Hareketli satışta yanlış Yükleme

<body id="body"> 
    <div id="square"></div> 
</body> 


#body { 
    background: #000; 
} 

#square { 
    background-color: #fff; 
    margin: 0 auto; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    } 

var box = document.getElementById('square'); 
TOP = (window.innerHeight - box.offsetHeight)/2; 
box.style.top = TOP; 

var down = setInterval(animateDown, 15); 
    var up; 

    function animateDown() 
    { 
     TOP += 3; 
     box.style.top = TOP + 'px'; 
     if(TOP > 900){ 
      clearInterval(down); 
      up = setInterval(animateUp, 15); 
     } 

    } 

    function animateUp() 
    { 
     TOP -= 3; 
     box.style.top = TOP + 'px'; 
     if(TOP <= (window.innerHeight - box.offsetHeight)/2){ 
      clearInterval(up); 
      down = setInterval(animateDown, 15); 
     } 

    }

bir jsfiddle link yanı >> peşin https://jsfiddle.net/xgilmore/pLbgvc3L/

sayesinde

kaynak

2016-03-18 Xavier Gilmore

benim için iyi çalışıyor (jsfiddle değil) –

Hangi tarayıcı kullanıyordunuz? –

Bu etrafında bir işin sıralama, ama daha sonra gizli olarak kutu başlamak ve edebilirsiniz Animasyon yapmaya başladığınızda görünür hale getirin.

function animateDown() 
    { 
    box.style.visibility = 'visible'; 

#square { 
    background-color: #fff; 
    //margin: 0 auto; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    top: 20%; 
    visibility: hidden; 
    }

Ah üzgünüm, ben aslında ne olup bittiğini bilmek https://jsfiddle.net/pLbgvc3L/1/, sadece anlamaya ikinci göz attım. top: 20% hiçbir şey yapmaz çünkü yüzdeler yalnızca ana öğe (gövde) açık bir yüksekliğe sahipse çalışır. Beğen https://jsfiddle.net/pLbgvc3L/2/

kaynak

2016-03-18 18:10:01 Observer

Yine de neler olup bittiğini anlamaya çalışsam da, bu iş bitiyor. –

Hareketli satışta yanlış Yükleme

cevap

İlgili konular