爲什麼在兩個'div'之間的動畫中有一個空白的空間？

任何人都可以幫助我在動畫中刪除它們之間的空白區域嗎？爲什麼在兩個'div'之間的動畫中有一個空白的空間？

我是否需要添加一個div將兩個div換成一個？

我選擇使用位置頂部來調整我的div動畫是導致問題，請建議我一個更好的方法來做這個動畫，如果有的話？

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
       document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 
       up = false; 
 
       down = true; 
 
      } 
 
      else if (down) { 
 
       document.getElementById('first').style.top = '0px'; 
 
       document.getElementById('second').style.top = '300px'; 
 
       down = false; 
 
       up = true; 
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-28 Mohan Ravi

雖然向下移動讓你的第二個div元素頂部0像素，而不是300像素;

希望它有幫助。

來源

2017-07-28 05:06:02

我的jsfiddle鏈接：https://jsfiddle.net/duog6smr/ –

謝謝您的幫助！ –

隨時@MohanRavi –

不要給風格頂部300px而第二個div下跌，只需將其設置爲0px像第一個div。兩個div都是相對的，第一個是第二個，所以它不會是300px它將是300px + first div。

document.getElementById('second').style.top = '0px';

希望有所幫助，因爲你的相對位置

來源

2017-07-28 05:06:56 Berkay

謝謝你的幫助！欣賞你！ –

請標記Ashish的解答作爲答案。他首先回答。 @MohanRavi – Berkay

這太謙虛了！ –

它。使用給定的CSS：

#top { 
      background: white; 
      color: white; 
      width: 300px; 
      height: 300px; 
      display: inline-block; 
      overflow: hidden; 
      position:absolute; 
     } 

     #first { 
      background: blue; 
      transition: 0.5s; 
      height: 300px; 
      width:300px; 
      position:absolute; 
     } 

     #second { 
      margin:0px; 
      background: green; 
      transition: 0.5s; 
      height: 300px; 
      width:300px; 
      position: absolute; 
     }

來源

2017-07-28 05:09:27

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
             
 
       up = false; 
 
       down = true; 
 
      document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 

 
      } 
 
      else if (down) { 
 
       down = false; 
 
       up = true; 
 
       document.getElementById('second').style.top = '0px'; 
 
       document.getElementById('first').style.top = '0px'; 
 
       
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-28 05:45:56 Dhaarani

@Mohan Ravi檢查它。如果有任何疑問讓我知道。 – Dhaarani

謝謝你的幫助！ –

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
       document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 
       up = false; 
 
       down = true; 
 
      } 
 
      else if (down) { 
 
       document.getElementById('first').style.top = '0px'; 
 
       document.getElementById('second').style.top = '0'; 
 
       down = false; 
 
       up = true; 
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-28 06:28:11

爲什麼在兩個'div'之間的動畫中有一個空白的空間？

回答

相關問題