3
나는 myFunction을 지연시키는 더 좋은 방법을 찾으려고 노력 중이다. 나는이 이미지를 페이드 인 (fade in)시키는 애니메이션을 보았다. 슬라이드 레프트와 같은 새로운 애니메이션을 트리거하고이 애니매이션의 끝에서 myFunctionContinued 내 animaton가 완료되고 링크가 열릴 때까지 약 5 초. 나는 그 일을하는 영리한 방법이라고 생각하지 않으며 나는 당신의 제안을 원합니다!자바 스크립트에서 함수를 지연시키는 더 좋은 방법은 무엇입니까?
모든 코드는 id와 class가
<div id="object4" class="fadeIn">
<a id="myLink" href="#" onclick="myFunction();return false;"><img class="img4" src="http://imageshack.com/a/img89/1871/deqz.png"></a></div>
CSS를 fadein 및 오브젝트 4 트리거 애니메이션에
<style>
body{
background-color:black;
width:800px;
}
img.img4{
width: 300px; height: 200px;
transform:translate(550px,150px);
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-fill-mode: forwards;
animation-duration: 4s;
-webkit-animation-duration: 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideLeft {
0% {
transform: translateX(40%);
}
90% {
transform: translateX(-3%);
}
100% {
transform: rotate(-130deg) translate(-430px,60px);
}
/*from {transform: translateX(40%);}
to {transform: translateX(-3%);}*/
}
</style>
기능 클릭이 을 slideleft 키 프레임 fadein 및 slideleft와 jsfidle
HTML 단지 사업부는 여기 5 초간 기다리십시오. 동일한 기능을 계속 호출하고 동일한 창에서 링크를 엽니 다.
<script>
function myFunction()
{
$('#object4').click(function() {
$(this).addClass("slideLeft");
});
setTimeout(myFunctionContinued, 5000);
}
function myFunctionContinued(){
window.open("http://www.w3schools.com",'_self',false);}
</script>
키 프레임 스타일의 사진은 내가 집중하고자하는 내 애니메이션의 최종 결과가 아니므로 지연되는 방식입니다.
시간 내 주셔서 감사합니다. ;