JQuery 1.5.2 사용. 일부 로고 이미지를 움직이는 초기 스플래시 화면을로드하는 웹 사이트를 만듭니다. 이 스크립트에는 사용자가 클릭하여 애니메이션을 건너 뛸 수있는 click() 함수가 있습니다. 메인 페이지에는 Coda Slider 2.0 기반의 사용자 정의 컨텐츠 슬라이더와 이미지 슬라이드 쇼라는 두 가지 jquery 요소가 있습니다.jQuery 1.5.2 - click() 함수를 사용한 정말 이상한 동작
이 스플래시 화면 스크립트는 애니메이션을 실행하고 마지막 장면에 도달하면 스플래시 화면을 페이드 아웃하고 기본 콘텐츠 div를 페이드 아웃하고 이미지 슬라이드 쇼 및 코다 슬라이더를 트리거하는 클릭 기능을 트리거합니다.
이제 애니메이션을 자연스럽게 재생하도록하고 클릭 기능이 그렇게 호출되면 모든 것이 제대로 작동합니다. 그러나 애니메이션을 건너 뛰기 위해 클릭하면 모든 것이 재미 있습니다. 내 코다 슬라이더가 정상적으로 시작한 다음 잠시 후 슬라이드를 건너 뛰기 시작합니다. 내 이미지 슬라이드 쇼는 다른 모든 이미지 만 보여줍니다. 그것은 페이지의 전체 흐름이 엉망이 된 것과 같습니다.
코다 슬라이더 및 슬라이드 쇼의 트리거를 index.html로 이동하면 애니메이션을 재생하거나 클릭하여 건너 뛸 수 있는지 여부에 관계없이 모든 것이 작동합니다. 그러나 그렇게하면 사용자가 애니메이션을 재생할 수있게되며, 슬라이드 쇼와 코다 슬라이더는 메인 페이지가 표시 될 때까지 순환이 진행됩니다. 슬라이드 쇼가 완료 될 때까지 슬라이드를 시작하지 않으려 고합니다.
따라서 동작을 살펴보면 애니메이션을 건너 뛰기 위해 클릭 할 때 슬라이드 쇼 스크립트가 백그라운드에서 실행 중이며 완료 될 때 문제가 발생하는 것으로 추측 할 수 있습니다. 눈에 띄게 내 코드에 문제가 있습니까? 클릭하면 모든 애니메이션을 삭제해야합니까?
모든 조언 또는 문제 해결 정보를 보내 주시면 감사하겠습니다. 지금까지는 변경없이 클릭 기능 내에서 다른 위치로 코다 및 슬라이드 쇼 트리거를 이동하려고 시도했습니다. Splashscreen 스크립트와 index.html의 호출은 아래에 있습니다. 더 많은 코드가 필요하면 알려주십시오.
감사합니다 !!!
splashScreen.js :
(function($){
$.fn.splashScreen = function(settings){
settings = $.extend({
imageLayers: [],
imageShowTime:700,
preDelayTime: 2000
},settings);
var splashScreen = $('<div>',{
id: 'splashScreen',
css:{
height: $(document).height()+100
}
});
$('body').append(splashScreen);
splashScreen.click(function(){
splashScreen.fadeOut('slow',function() {
$('#slideshow IMG.active').animate({opacity: 1.0}, 1000, function() {
setInterval("slideSwitch()", 5000);
});
$('#container').fadeIn('slow');
});
$('#coda-slider-1').codaSlider();
});
var imageDiv = $('<div>',{
id: 'imageDiv'
});
splashScreen.append(imageDiv);
var image = $("<img />")
.attr("src","images/logo-her.gif?" + new Date().getTime());
image.hide();
image.load(function(){
image.css({marginLeft: "-162px", float: "left"});
});
imageDiv.append(image);
splashScreen.bind('changeImage',function(e,newID){
if (settings.imageLayers[newID] || newID == 3){
showImage(newID);
} else {
splashScreen.click();
}
});
splashScreen.trigger('changeImage',0);
function showImage(id) {
if (id <= 2) {
var image2 = $("<img />")
.attr("src",settings.imageLayers[id] + "?" + new Date().getTime());
image2.hide();
image2.load(function(){
image2.css({marginRight: "-467px", float: "right"});
image.delay(settings.preDelayTime).show().animate({marginLeft: "246px"}, 600).delay(settings.imageShowTime).fadeOut(600,function(){
image.css({marginLeft: "-162px"});
});
image2.delay(settings.preDelayTime).show().animate({marginRight: "246px"}, 600).delay(settings.imageShowTime).fadeOut('slow',function(){
image2.remove();
splashScreen.trigger('changeImage',[id+1]);
});
});
imageDiv.append(image2);
} else {
image.remove();
var imageLogo = $("<img />")
.attr("src","images/logo-final.gif?" + new Date().getTime());
imageLogo.hide();
imageLogo.load(function(){
imageLogo.css({margin: "0 auto", clear: "both"});
imageLogo.delay(settings.preDelayTime).fadeIn(600).delay(settings.imageShowTime).fadeOut(600,function(){
imageLogo.remove();
splashScreen.trigger('changeImage',[id+1]);
});
});
imageDiv.append(imageLogo);
}
}
return this;
}
})(jQuery);
index.html을 호출 :
<script type="text/javascript" src="scripts/jquery-1.5.2.js"></script>
<script type="text/javascript" src="scripts/splashScreen.js"></script>
<script type="text/javascript" src="scripts/slideSwitch.js"></script>
<script type="text/javascript" src="scripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#logo').splashScreen({
imageLayers : [
'images/logo-01.gif',
'images/logo-02.gif',
'images/logo-03.gif'
]
});
});
</script>