jquery - 如何在项目击中 WayPoint div 时将其定位为动画-6ren

jquery - 如何在项目击中 WayPoint div 时将其定位为动画

转载作者：行者123 更新时间：2023-12-01 04:35:48

我希望您能帮助我了解 jQuery Waypoints 的工作原理。

目标

向下滚动到 id 为#targetPoint 的指定 div
点击后，触发元素#smooth-logo 的动画

** 动画不应触发它们击中 #targetPoint **

我在做什么不起作用，而且可能不是执行此操作的方法，但 Waypoint 文档让我(新手)感到困惑，因此我希望有更多经验的人可以帮助我弄清楚如何构建它。

该事件的网站在这里:

https://stable.stable-demos.com/quip/

注意:此代码当前存在控制台错误，但如果您转到此笔，您可以看到当 #targetPoint 被击中时应运行的预期动画。

https://codepen.io/brittany-golden/pen/OGxbxq

jQuery(function($){

	// When you reach the target div
	$('#targetPoint').waypoint(function(direction) {
	  
    // Target this element and run the up or down animation respectively
		$("#smooth-logo").waypoint(function(direction) {
		
		if (direction === 'down') {
			$(".fadeMe").addClass("blur-in-fwd");
			$(".fadeMe").removeClass("blur-in-bkw");
			$("#smooth-logo").addClass("slideLeft");
			$("#smooth-logo").removeClass("slideRight");
			$("#animOut").get(0).beginElement(); // restart the animation
		} else if (direction === 'up') {  
			$(".fadeMe").addClass("blur-in-bkw");
			$(".fadeMe").removeClass("blur-in-fwd slide-right");
			$("#smooth-logo").addClass("slideRight");
			$("#smooth-logo").removeClass("slideLeft");
			$("#animIn").get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: "0%" })
		
		
	});
  
});

.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- small the -->
		<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>

		<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>

		<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>


		<!-- BIG S -->
		<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
		<!-- Big S Blur Animation -->
		<defs>

		  <!-- BLUR IN -->
	      <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
	          <animate id="animOut"
	                   attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="1" result="alphapart">
	          <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	      
	      <!-- BLUR OUT -->
	      <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
	          <animate id="animIn"
	                   attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="0" result="alphapart">
	          <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	    </defs>


		<!-- BIG T -->
		<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

		<!-- ICON UPPER -->
		<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>

		<!-- ICON LOWER -->
		<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>

		<!-- BIG B -->
		<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>

		<!-- BIG L -->
		<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>

		<!-- BIG E -->
		<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
	</svg>
</div>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>

最佳答案

下面的工作片段，是您想要的吗？基本上，您不需要指定 #smooth-logo 路点，因为它是动画的一部分，并且 Logo 本身在您滚动页面时始终保持固定在同一位置，您只需要指定是目标点，当它到达目标点时，动画将运行(我放置了一个 console.log() 来通知何时到达目标):

$(function() {
    $('#targetPoint').waypoint(function(direction) {
    console.log('waypoint reached!');
	  
    // Target this element and run the up or down animation respectively
		
		if (direction === 'down') {
			$(".fadeMe").addClass("blur-in-fwd");
			$(".fadeMe").removeClass("blur-in-bkw");
			$("#smooth-logo").addClass("slideLeft");
			$("#smooth-logo").removeClass("slideRight");
			$("#animOut").get(0).beginElement(); // restart the animation
		} else if (direction === 'up') {  
			$(".fadeMe").addClass("blur-in-bkw");
			$(".fadeMe").removeClass("blur-in-fwd slide-right");
			$("#smooth-logo").addClass("slideRight");
			$("#smooth-logo").removeClass("slideLeft");
			$("#animIn").get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: "0%" })
		
});

.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- small the -->
		<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>

		<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>

		<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>


		<!-- BIG S -->
		<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
		<!-- Big S Blur Animation -->
		<defs>

		  <!-- BLUR IN -->
	      <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
	          <animate id="animOut"
	                   attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="1" result="alphapart">
	          <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	      
	      <!-- BLUR OUT -->
	      <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
	          <animate id="animIn"
	                   attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="0" result="alphapart">
	          <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	    </defs>


		<!-- BIG T -->
		<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

		<!-- ICON UPPER -->
		<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>

		<!-- ICON LOWER -->
		<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>

		<!-- BIG B -->
		<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>

		<!-- BIG L -->
		<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>

		<!-- BIG E -->
		<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
	</svg>
</div>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>

关于jquery - 如何在项目击中 WayPoint div 时将其定位为动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56244345/

文章推荐： java - 重复的 Java 注解异常

文章推荐： python - 使用格式化将 time.struct_time 转换为字符串

文章推荐： Python 列表理解条件过滤器语法

docker - 击中 Docker 容器时对等方重置连接
我遇到了一个问题，我无法将网络请求发送到我创建的 Docker 容器。我已经公开了正确的端口，所以我不确定这里可能有哪些其他问题。我有一台服务器在容器中运行 alice在 localhost:100
c# - 被 OverflowException 击中
在下面最后一行的方法中，我总是遇到异常: System.OverflowException: Value was either too large or too small for an Int32.
python - 击中/static/位置时不提供 index.html
我正在关注 realpython article about running Flask on Ubuntu .建议在文章中检查 nginx 已通过导航到 http://localhost:8000/
haskell - 是否有一个直接的解决方案来接收元素 *prior* 击中 dropWhile 谓词？
给定一个条件，我想搜索一个元素列表并返回第一个达到条件的元素和前一个元素。在 C/C++ 中，这很容易: int i = 0; for(;;i++) if (arr[i] == 0) break;
java - Ui 击中 Firebase Firestore 删除数据？
我正在使用 Firebase Firestore 我想从数据库中删除数据..删除数据工作正常，但我的进度对话框卡住了。我想我必须使用工作线程，但我不知道如何使用。 db = FirebaseFire
c# - FCM(FirebaseMessagingService)OnNewToken 没有被 Android 击中
我按照 this page 上的说明进行操作创建推送通知。我之前实际上已经做过一次并且能够让它工作(几周前)，花了一些时间，我想我现在才再次做这个教程作为复习，出于某种原因，我可以'甚至获取代码以点击
java - 我被“比较方法违反了它的一般契约(Contract)!”击中。创建/添加超过一定数量的对象时发生异常
我在大学学习Java，这是我的任务。任务是创建一个由颜色方块组成的x x y网格，每个网格在单独的线程中运行，并且每k ms要么将其颜色更改为随机的颜色，要么对其邻居的颜色求平均。现在，如果我创建一
php - Apache 被 localhost (127.0.0.1) 击中
我有一台服务器，它不断地从自身获得随机命中，IP 读取为 127.0.0.1 .我知道有各种各样的程序可以做到这一点，但服务器是带有 sendmail 和 monit 的最低限度的 LAMP 服务器。
sqlite - 击中 sqlalchemy.exc.IntegrityError : (IntegrityError) constraint failed 'INSERT INTO users
我正在使用 sqlite 数据库并且我在这个要点中声明了模型 https://gist.github.com/mmahesh/7245561 我添加了一个带有事务管理器的模型实例作为 with tra

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何在项目击中 WayPoint div 时将其定位为动画