一段时间后停止功能

Question

我有一个用greensock制作的小预加载器跟随我的鼠标，但是当它在动画后变大时我希望它停止跟随鼠标但是我找不到一个代码，它既不会使用greensock也不会使用jQuery / JavaScript的。

codepen link http://codepen.io/amirhanif/pen/GjbjNe

＆＃13;

＆＃13;

var self = this;
self.hello = 'hello';
var $fade = $('.fade-bounce');
var $circle = $('.icon');
var movementTimer = null;

TweenMax.to($circle, 3, {
  repeat: 2,
  rotation: 760,
  transformOrigin: "50% 50%",
  ease: Bounce.easeOut,
  margin: " 0 auto"
});
TweenMax.to(
  $circle, 500, {
    repeat: -1,
    rotation: 50,
    delay: 7
  });
TweenMax.to(
  $circle,
  1, {
    width: "800vh",
    overflow: "hidden",
    delay: 7,
    y: "-50%",
    transformOrigin: "50% 50%",
    x: "-50%",
    ease: Quad.easeInOut
  });
TweenMax.staggerFrom($fade,
  1, {
    opacity: 0,
    scale: 0.1,
    delay: 8,
    ease: Bounce.easeOut
  }, 1.1);



$(window).on('mousemove', moveCircle);


function moveCircle(e) {
  TweenLite.to($circle, 0.2, {
    css: {
      left: e.pageX,
      top: e.pageY
    }

  });

}

＆＃13;

$color1:#3f88c5;
 body {
  overflow: hidden;
  height: 100vh;
}
.bg-home {
  background-color: $color1;
  text-align: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
}
.icon-holder {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100vh;
  padding: 0;
  z-index: 4;
  position: absolute;
}
.icon {
  margin: 20px auto;
  opacity: 1;
  position: absolute;
  z-index: 3;
  text-align: center;
  padding: 0;
  width: 30px;
  overflow: scroll;
}
.st0 {
  fill: #F6A900;
}
.st1 {
  fill: #F9CC00;
}
.bigM {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: block;
  margin: 0 auto;
  background-position: center;
  background-size: contain;
  padding-top: 20%;
  img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
.contentInlog {
  width: 100%;
  height: 100vh;
  position: absolute;
  margin: 0 auto;
  top: 0;
  z-index: 4;
  opacity: 1;
}
.win {
  position: relative;
  z-index: 5;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 0px;
  top: 0;
  margin-bottom: 0;
  background-image: url(' ../img/hoofdtekst.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.logo {
  position: relative;
  z-index: 5;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  top: 0;
  background-image: url(' ../img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.fade-bounce {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<section id="home">
  <div class="bg-home"></div>
  <div class="icon-holder small-12 columns">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <circle class="st0" cx="199.5" cy="199.7" r="191.1" />
      <path class="st1" d="M199.8 390.8l1-191.1c2.3 0-2.3 0.3 0 0l26.1 189.2C218 390.1 208.8 390.8 199.8 390.8zM172.7 388.9c-9-1.3-18-3.2-26.7-5.8l54.8-183.5c2.2 0.6-2.3-0.3 0 0L172.7 388.9zM253.6 383.1l-52.8-183.4c2.2-0.6-2.1 0.9 0 0l78.4 173.8C270.9 377.3 262.3 380.5 253.6 383.1zM120.4 373.6c-8.3-3.8-16.3-8.2-24-13.1l104.3-160.8c1.9 1.2-2.1-1 0 0L120.4 373.6zM303.1 360.4L200.8 199.7c1.9-1.2-1.8 1.5 0 0l124.1 144.4C318 350 310.7 355.5 303.1 360.4zM74.6 344.2c-6.8-5.9-13.3-12.4-19.2-19.2l145.4-125.3c1.5 1.8-1.8-1.5 0 0L74.6 344.2zM344.1 324.8L200.8 199.7c1.5-1.8-1.2 1.9 0 0L360.5 303C355.6 310.6 350.1 318 344.1 324.8zM39 303.2c-4.9-7.6-9.3-15.7-13.1-23.9l174.8-79.6c0.9 2.1-1.2-1.9 0 0L39 303.2zM373.6 279.1l-172.8-79.4c0.9-2.1-0.6 2.2 0 0l182.4 53.8C380.6 262.2 377.3 270.8 373.6 279.1zM16.3 253.7c-2.6-8.7-4.5-17.7-5.8-26.7l190.2-27.3c0.3 2.3-0.6-2.2 0 0L16.3 253.7zM388.9 226.8l-188.1-27.1c0.3-2.3 0 2.4 0 0l0 0 190-0.3v0.3C390.8 208.7 390.2 217.8 388.9 226.8zM8.6 199.8v-0.1c0-9 0.6-18 1.9-26.9l190.3 26.9c-0.3 2.3 0-2.3 0 0L8.6 199.8zM200.8 199.7C200.4 197.4 201.4 201.8 200.8 199.7L383 145.5c2.6 8.7 4.5 17.7 5.8 26.7L200.8 199.7zM200.8 199.7L16.2 146.1c2.5-8.7 5.8-17.4 9.5-25.6L200.8 199.7C199.8 201.7 201.4 197.5 200.8 199.7zM200.8 199.7C199.8 197.6 202 201.6 200.8 199.7L360.2 96c4.9 7.6 9.3 15.7 13.1 23.9L200.8 199.7zM200.8 199.7L38.8 96.5c4.9-7.6 10.4-15 16.3-21.8L200.8 199.7C199.2 201.4 202 197.7 200.8 199.7zM200.8 199.7C199.2 197.9 202.5 201.2 200.8 199.7L324.6 55c6.8 5.9 13.3 12.4 19.3 19.2L200.8 199.7zM200.8 199.7L74.3 55.4c6.8-5.9 14.2-11.4 21.8-16.4L200.8 199.7C198.8 200.9 202.5 198.1 200.8 199.7zM200.8 199.7C198.8 198.4 202.8 200.6 200.8 199.7l78.1-174c8.3 3.8 16.3 8.2 24 13.1L200.8 199.7zM200.8 199.7L120 25.9c8.3-3.8 16.9-7 25.6-9.6L200.8 199.7C198.6 200.3 202.8 198.7 200.8 199.7zM200.8 199.7C198.6 199 203 200 200.8 199.7l25.7-189.2c9 1.3 18 3.2 26.7 5.7L200.8 199.7zM200.8 199.7L172.3 10.5c8.9-1.3 18-1.9 27.1-2L200.8 199.7C198.4 199.7 203 199.3 200.8 199.7z"
      />
    </svg>
  </div>

  <div class="bigM small-12 large-10 columns ">
    <img ng-src="img/BigM.png" width="80%" height="auto">
  </div>

  <div class="contentInlog">

    <div class="win small-12 large-10 columns fade-bounce">

    </div>
    <div class="logo small-12 large-10 fade-bounce"></div>

    <form>
      <!-- <section class="content">
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-10" />
					<label class="input__label input__label--jiro" for="input-10">
						<span class="input__label-content input__label-content--jiro">Voer u email in</span>
        </label>
        </span>
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-11" />
					<label class="input__label input__label--jiro" for="input-11">
						<span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span>
        </label>
        </span>
				<span class="input input--jiro">
					<input class="input_submit"  type="submit" value="DOE MEE" id="input-12" />
        </span>
    </section> -->

    </form>


  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的动画以7sec结尾，因此我setTimeout()申请了7sec。在7sec之后，鼠标悬停事件将被禁用。

var self = this;
self.hello = 'hello';
var $fade = $('.fade-bounce');
var $circle = $('.icon');
var movementTimer = null;

TweenMax.to($circle, 3, {
  repeat: 2,
  rotation: 760,
  transformOrigin: "50% 50%",
  ease: Bounce.easeOut,
  margin: " 0 auto"
});
TweenMax.to(
  $circle, 500, {
    repeat: -1,
    rotation: 50,
    delay: 7
  });
TweenMax.to(
  $circle,
  1, {
    width: "800vh",
    overflow: "hidden",
    delay: 7,
    y: "-50%",
    transformOrigin: "50% 50%",
    x: "-50%",
    ease: Quad.easeInOut
  });
TweenMax.staggerFrom($fade,
  1, {
    opacity: 0,
    scale: 0.1,
    delay: 8,
    ease: Bounce.easeOut
  }, 1.1);



$(window).on('mousemove', moveCircle);
setTimeout(function () {$(window).off('mousemove', moveCircle);},7000);

function moveCircle(e) {
  TweenLite.to($circle, 0.2, {
    css: {
      left: e.pageX,
      top: e.pageY
    }

  });

}

$color1:#3f88c5;
 body {
  overflow: hidden;
  height: 100vh;
}
.bg-home {
  background-color: $color1;
  text-align: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
}
.icon-holder {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100vh;
  padding: 0;
  z-index: 4;
  position: absolute;
}
.icon {
  margin: 20px auto;
  opacity: 1;
  position: absolute;
  z-index: 3;
  text-align: center;
  padding: 0;
  width: 30px;
  overflow: scroll;
}
.st0 {
  fill: #F6A900;
}
.st1 {
  fill: #F9CC00;
}
.bigM {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: block;
  margin: 0 auto;
  background-position: center;
  background-size: contain;
  padding-top: 20%;
  img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
.contentInlog {
  width: 100%;
  height: 100vh;
  position: absolute;
  margin: 0 auto;
  top: 0;
  z-index: 4;
  opacity: 1;
}
.win {
  position: relative;
  z-index: 5;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 0px;
  top: 0;
  margin-bottom: 0;
  background-image: url(' ../img/hoofdtekst.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.logo {
  position: relative;
  z-index: 5;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  top: 0;
  background-image: url(' ../img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.fade-bounce {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<section id="home">
  <div class="bg-home"></div>
  <div class="icon-holder small-12 columns">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <circle class="st0" cx="199.5" cy="199.7" r="191.1" />
      <path class="st1" d="M199.8 390.8l1-191.1c2.3 0-2.3 0.3 0 0l26.1 189.2C218 390.1 208.8 390.8 199.8 390.8zM172.7 388.9c-9-1.3-18-3.2-26.7-5.8l54.8-183.5c2.2 0.6-2.3-0.3 0 0L172.7 388.9zM253.6 383.1l-52.8-183.4c2.2-0.6-2.1 0.9 0 0l78.4 173.8C270.9 377.3 262.3 380.5 253.6 383.1zM120.4 373.6c-8.3-3.8-16.3-8.2-24-13.1l104.3-160.8c1.9 1.2-2.1-1 0 0L120.4 373.6zM303.1 360.4L200.8 199.7c1.9-1.2-1.8 1.5 0 0l124.1 144.4C318 350 310.7 355.5 303.1 360.4zM74.6 344.2c-6.8-5.9-13.3-12.4-19.2-19.2l145.4-125.3c1.5 1.8-1.8-1.5 0 0L74.6 344.2zM344.1 324.8L200.8 199.7c1.5-1.8-1.2 1.9 0 0L360.5 303C355.6 310.6 350.1 318 344.1 324.8zM39 303.2c-4.9-7.6-9.3-15.7-13.1-23.9l174.8-79.6c0.9 2.1-1.2-1.9 0 0L39 303.2zM373.6 279.1l-172.8-79.4c0.9-2.1-0.6 2.2 0 0l182.4 53.8C380.6 262.2 377.3 270.8 373.6 279.1zM16.3 253.7c-2.6-8.7-4.5-17.7-5.8-26.7l190.2-27.3c0.3 2.3-0.6-2.2 0 0L16.3 253.7zM388.9 226.8l-188.1-27.1c0.3-2.3 0 2.4 0 0l0 0 190-0.3v0.3C390.8 208.7 390.2 217.8 388.9 226.8zM8.6 199.8v-0.1c0-9 0.6-18 1.9-26.9l190.3 26.9c-0.3 2.3 0-2.3 0 0L8.6 199.8zM200.8 199.7C200.4 197.4 201.4 201.8 200.8 199.7L383 145.5c2.6 8.7 4.5 17.7 5.8 26.7L200.8 199.7zM200.8 199.7L16.2 146.1c2.5-8.7 5.8-17.4 9.5-25.6L200.8 199.7C199.8 201.7 201.4 197.5 200.8 199.7zM200.8 199.7C199.8 197.6 202 201.6 200.8 199.7L360.2 96c4.9 7.6 9.3 15.7 13.1 23.9L200.8 199.7zM200.8 199.7L38.8 96.5c4.9-7.6 10.4-15 16.3-21.8L200.8 199.7C199.2 201.4 202 197.7 200.8 199.7zM200.8 199.7C199.2 197.9 202.5 201.2 200.8 199.7L324.6 55c6.8 5.9 13.3 12.4 19.3 19.2L200.8 199.7zM200.8 199.7L74.3 55.4c6.8-5.9 14.2-11.4 21.8-16.4L200.8 199.7C198.8 200.9 202.5 198.1 200.8 199.7zM200.8 199.7C198.8 198.4 202.8 200.6 200.8 199.7l78.1-174c8.3 3.8 16.3 8.2 24 13.1L200.8 199.7zM200.8 199.7L120 25.9c8.3-3.8 16.9-7 25.6-9.6L200.8 199.7C198.6 200.3 202.8 198.7 200.8 199.7zM200.8 199.7C198.6 199 203 200 200.8 199.7l25.7-189.2c9 1.3 18 3.2 26.7 5.7L200.8 199.7zM200.8 199.7L172.3 10.5c8.9-1.3 18-1.9 27.1-2L200.8 199.7C198.4 199.7 203 199.3 200.8 199.7z"
      />
    </svg>
  </div>

  <div class="bigM small-12 large-10 columns ">
    <img ng-src="img/BigM.png" width="80%" height="auto">
  </div>

  <div class="contentInlog">

    <div class="win small-12 large-10 columns fade-bounce">

    </div>
    <div class="logo small-12 large-10 fade-bounce"></div>

    <form>
      <!-- <section class="content">
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-10" />
					<label class="input__label input__label--jiro" for="input-10">
						<span class="input__label-content input__label-content--jiro">Voer u email in</span>
        </label>
        </span>
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-11" />
					<label class="input__label input__label--jiro" for="input-11">
						<span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span>
        </label>
        </span>
				<span class="input input--jiro">
					<input class="input_submit"  type="submit" value="DOE MEE" id="input-12" />
        </span>
    </section> -->

    </form>


  </div>

</section>