Question

使用此示例使用css3进行一些动画：

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

我制作了Jquery代码，通过滚动来显示动画。当我用一个div做动画时，一切都是正确的，但是当我尝试对同一个类的两个div应用相同的动画时出现问题，第一个矩形变得动画但第二个不会发生;这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
	

	<style>

		body {
		   height: 2200px;
		}
		#objeto {
		  /* modifique la posición para que se vea en la caja de stacksnippet */
		 
		  width: 30%;
		  height: 200px;
		  background-color: red;
		  visibility: hidden;
		}

		.slideUp {
		  animation-name: slideUp;
		  animation-duration: 1s;
		  animation-timing-function: ease;
		  visibility: visible !important;
		}
		@keyframes slideUp {
		  0% {
		    transform: translateY(100%);
		  }
		  50% {
		    transform: translateY(-8%);
		  }
		  65% {
		    transform: translateY(4%);
		  }
		  80% {
		    transform: translateY(-4%);
		  }
		  95% {
		    transform: translateY(2%);
		  }
		  100% {
		    transform: translateY(0%);
		  }
		}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li{
			color: black;
		}
		.foo{
			background-color: yellow;
		}
	</style>
</head>
<body>


	 <div id="objeto" style="position: relative;
		  top: 100px;"></div>

	<div id="objeto"></div> 

	



	<script>


	$(window).scroll(function() {
  		$('#objeto').each(function() {
		    var imagePos = $(this).offset().top;
		    var topOfWindow = $(window).scrollTop();

	    console.log(imagePos, topOfWindow);
	    if (imagePos < topOfWindow + 400) {
	      $(this).addClass("slideUp");
	    }
	  });
	});

	/*$(window).scroll(function() {
  		$('ul').each(function( ) {
		    $(this).css("background-color","blue")
		    
	  });
	});*/

	</script>
</body>
</html>

Answer 1

您应该使用class而不是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();

使用css3滚动动画

1 个答案: