0
即時通訊做一些動畫與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>
您可以進行測試。如果你把'$('#objeto')。length'返回1,即使你有5個元素具有相同的id。重複的ID在同一個HTML頁面是一個不好的做法,它會導致很多問題。這解決了下面的答案。 –