fadeIn/FadeOut이 실행되는 동안 다른 스크립트의 실행 방지

Question

그래서 나는 클릭 할 때 여러 div를 fadeIn/Out하는 4 가지 스크립트 세트가 있습니다. 내가 겪고있는 문제는 페이드 인/아웃 효과가 함께 섞이거나 톤을 클릭하는 것입니다. 페이드 인/아웃주기 완료 후에 만 ​​어떻게 발사 할 수 있습니까?

여기 내 jquery 스크립트입니다. 필요한 경우 html을 게시 할 수 있습니다.

// 1st Navigation 


$("#1stforward").click(function() { 
    $("#1st").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3375).fadeIn(4500, 'swing'); 

}); 



//2nd Navigation 


$("#2ndback").click(function() { 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#1st").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#2ndforward").click(function() { 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 




// 3rd Navigation 


$("#3rdback").click(function() { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#3rdforward").click(function() { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#4th").delay(3500).fadeIn(4500, 'swing'); 


}); 



// 4th Navigation 


$("#4thback").click(function() { 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#4thforward").click(function() { 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#5th").delay(3500).fadeIn(4500, 'swing'); 


}); 

Answer 1

당신은 어떤 요소가 현재 jQuery를 :animated 선택기를 사용하여 애니메이션 "back" 또는 "forward"로 끝나는 id을 가지고 있는지 확인하는 함수를 만들거나 true가 내 .animate()를 호출하지 않을 경우 .queue().length는 0보다 큰 현재 click 처리기입니다. 그렇지 않은 경우

예를

$("#3rdback").click(function() { 
    if (!animated) { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 
    } 
}); 

Answer 2

를 들어 fadeIn 및 페이드 아웃 함수 호출에 대한 complete callback 지원이있다. 자세한 내용은 여기를 참조하십시오. http://api.jquery.com/fadein/

그래서 구현은 이와 같아야합니다.

$("#3rd").fadeIn("slow", function() { 

    // Animation complete 
    $("#2nd").fadeOut("slow", function() { 
    // Animation complete 
    }); 

}); 

Answer 3

당신은 모든 divs가 맞습니까? 그렇다면 거의 복사/붙여 넣기가 가능하며 두 번 클릭하지 않을 수 있습니다. 나는 0.5 초 동안 타임 아웃 기능을 설정하고있다. 필요에 따라 '500'의 밀리 초를 바꿀 수있다. 포인터 이벤트 (예 : 클릭)를 0.5 초 동안 방지합니다.

클릭하지 않으려는 모든 것에 특정 클래스를 추가하고이 함수를 시간 초과 함수로 타겟팅하는 것이 더 좋을 수 있지만이 작업은 수행해야합니다.

// 1st Navigation 


$("#1stforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $(this).css(
    $("#1st").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3375).fadeIn(4500, 'swing'); 

}); 



//2nd Navigation 


$("#2ndback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#1st").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#2ndforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 




// 3rd Navigation 


$("#3rdback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#3rdforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#4th").delay(3500).fadeIn(4500, 'swing'); 


}); 



// 4th Navigation 


$("#4thback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#4thforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#5th").delay(3500).fadeIn(4500, 'swing'); 


});