在一定的時間後停止函數

-1

我有一個使用greensock製作的預加載器來跟隨我的鼠標，但是當它在動畫後變得更大時，我希望它停止跟隨鼠標，但是我找不到代碼，與綠色環保，也沒有jQuery/JavaScript。在一定的時間後停止函數

codepen linkhttp://codepen.io/amirhanif/pen/GjbjNe

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 
 
    } 
 

 
    }); 
 

 
}

$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"> 
 
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-10" /> 
 
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-10"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro">Voer u email in</span> 
 
     </label> 
 
     </span> 
 
     <span class="input input--jiro"> 
 
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-11" /> 
 
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-11"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span> 
 
     </label> 
 
     </span> 
 
\t \t \t \t <span class="input input--jiro"> 
 
\t \t \t \t \t <input class="input_submit" type="submit" value="DOE MEE" id="input-12" /> 
 
     </span> 
 
    </section> --> 
 

 
    </form> 
 

 

 
    </div> 
 

 
</section>

來源

2016-11-07 amir hanif

請張貼的問題在您的代碼。如果CodePen關閉，這個問題將無法回答 –

使用回調：http://stackoverflow.com/questions/15815648/tweenmax-callback-being-executed-before-the-animation-end – mplungjan

謝謝羅裏我將上傳它在問題，但它不起作用在mousemouve函數中存儲回調函數是顯示你正在使用的錯誤： –

動畫與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"> 
 
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-10" /> 
 
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-10"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro">Voer u email in</span> 
 
     </label> 
 
     </span> 
 
     <span class="input input--jiro"> 
 
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-11" /> 
 
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-11"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span> 
 
     </label> 
 
     </span> 
 
\t \t \t \t <span class="input input--jiro"> 
 
\t \t \t \t \t <input class="input_submit" type="submit" value="DOE MEE" id="input-12" /> 
 
     </span> 
 
    </section> --> 
 

 
    </form> 
 

 

 
    </div> 
 

 
</section>

來源

2016-11-07 09:52:31 prasanth

thanksss Parasad這做了你最好的工作:) –

@amirhanif不要忘記。如果答案是有幫助的upvote。或如果答案滿足您的問題。請[勾選標記作爲答案]（http://stackoverflow.com/help/someone-answers）。它對未來的訪問者有幫助。 – prasanth

謝謝我認爲我投了它作爲答案，但投票的事情無法正常顯示感謝您的反饋！記錄下名聲低於15的人的投票記錄，但不要更改公開顯示的帖子分數。 –

在一定的時間後停止函數

回答

相關問題