用這個例子CSS3

即時通訊做一些動畫與CSS3滾動動畫：用這個例子CSS3

http://www.justinaguilar.com/animations/index.html#

我做了jQuery代碼來提供動畫顯示滾動。當我做一個div的動畫時，一切都正確，但是當我嘗試將相同的動畫應用於兩個具有相同類的div時，出現了一些問題，第一個矩形變爲動畫，但不會與第二個矩形發生;下面是代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t 
 

 
\t <style> 
 

 
\t \t body { 
 
\t \t height: 2200px; 
 
\t \t } 
 
\t \t #objeto { 
 
\t \t /* modifique la posición para que se vea en la caja de stacksnippet */ 
 
\t \t 
 
\t \t width: 30%; 
 
\t \t height: 200px; 
 
\t \t background-color: red; 
 
\t \t visibility: hidden; 
 
\t \t } 
 

 
\t \t .slideUp { 
 
\t \t animation-name: slideUp; 
 
\t \t animation-duration: 1s; 
 
\t \t animation-timing-function: ease; 
 
\t \t visibility: visible !important; 
 
\t \t } 
 
\t \t @keyframes slideUp { 
 
\t \t 0% { 
 
\t \t  transform: translateY(100%); 
 
\t \t } 
 
\t \t 50% { 
 
\t \t  transform: translateY(-8%); 
 
\t \t } 
 
\t \t 65% { 
 
\t \t  transform: translateY(4%); 
 
\t \t } 
 
\t \t 80% { 
 
\t \t  transform: translateY(-4%); 
 
\t \t } 
 
\t \t 95% { 
 
\t \t  transform: translateY(2%); 
 
\t \t } 
 
\t \t 100% { 
 
\t \t  transform: translateY(0%); 
 
\t \t } 
 
\t \t } 
 
\t </style> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t \t 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <style> 
 
\t \t li{ 
 
\t \t \t color: black; 
 
\t \t } 
 
\t \t .foo{ 
 
\t \t \t background-color: yellow; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 

 
\t <div id="objeto" style="position: relative; 
 
\t \t top: 100px;"></div> 
 

 
\t <div id="objeto"></div> 
 

 
\t 
 

 

 

 
\t <script> 
 

 

 
\t $(window).scroll(function() { 
 
    \t \t $('#objeto').each(function() { 
 
\t \t  var imagePos = $(this).offset().top; 
 
\t \t  var topOfWindow = $(window).scrollTop(); 
 

 
\t  console.log(imagePos, topOfWindow); 
 
\t  if (imagePos < topOfWindow + 400) { 
 
\t  $(this).addClass("slideUp"); 
 
\t  } 
 
\t }); 
 
\t }); 
 

 
\t /*$(window).scroll(function() { 
 
    \t \t $('ul').each(function() { 
 
\t \t  $(this).css("background-color","blue") 
 
\t \t  
 
\t }); 
 
\t });*/ 
 

 
\t </script> 
 
</body> 
 
</html>

來源

2016-03-08 Albert

您可以進行測試。如果你把'$（'＃objeto'）。length'返回1，即使你有5個元素具有相同的id。重複的ID在同一個HTML頁面是一個不好的做法，它會導致很多問題。這解決了下面的答案。 –

您應該使用ID的類。因爲ID是唯一的（https://css-tricks.com/the-difference-between-id-and-class）。

簡單地改變代碼：

.objeto { 
     /* modifique la posición para que se vea en la caja de stacksnippet */ 

     width: 30%; 
     height: 200px; 
     background-color: red; 
     visibility: hidden; 
    }

而且

<div class="objeto" style="position: relative; 
     top: 100px;"></div> 

<div class="objeto"></div>

而且

$('.objeto').each(function() { 
     var imagePos = $(this).offset().top; 
     var topOfWindow = $(window).scrollTop();

來源

2016-03-08 11:06:24 Yox2l

非常感謝我幾個小時試圖修復它！ THANKSSSS – Albert

用這個例子CSS3

回答

相關問題