2012-12-11 2 views
1
$(document).ready(function() { 

    elem = new Array('a1','a2','a3','a4','a5','a6','a7','a8','a9'); 
    $('.graphic').hide(); 

    hidden = false; 
    time = 0; 
    elem.sort(randomize); 
    $.each(elem, function(i, r) { 
    setTimeout(function() { 
     $('#'+r).fadeIn(400); 
    }, time); 
    time += 200; 
    }); 

    time = 0; 
    //elem.sort(randomize); 
    setTimeout(function() { 
    $.each(elem, function(i, r) { 
     setTimeout(function() { 
     $('#'+r).fadeOut(800); 
     }, time); 
     time += 200; 
    }); 
    $('.graphic').fadeIn(2400); 
     hidden = true; 
    }, 3000); 

    $('.graphic').mouseenter(function(){ 
    if(hidden) { 
     //time = 0; 
     //elem.sort(randomize); 
     $('.graphic').fadeOut(400); 
     $.each(elem, function(i, r) { 
     /*setTimeout(function() { 
      $('#'+r).fadeIn(400); 
      }, time); 
     time += 200;*/ 
     $('#'+r).fadeIn(400); 
     }); 
     hidden = false; 
    } 
    }); 

    $('.content').mouseenter(function(){ 
    if(!hidden) { 
     time = 0; 
     //elem.sort(randomize); 
     $.each(elem, function(i, r) { 
     setTimeout(function() { 
      $('#'+r).fadeOut(800); 
     }, time); 
     time += 200; 
     }); 
     $('.graphic').fadeIn(2400); 
     hidden = true; 
    } 
    }); 

    $('.tile').click(function(t) { 
    $(this).fadeOut(800, function() { 
     window.location = $(this).attr("href"); 
     } 
    ); 
    return false; 
    }); 


    function randomize(){ 
    return (Math.round(Math.random())-0.5); 
    } 

}); 

어떤 이유로 든 효과를 없앨 수 없습니다. 측면이로드되면 배너가 숨겨집니다. 9 요소가왔다 갔다. div를 입력 할 때마다 배너가 사라지고 9 div가 입력됩니다. 입력을 나가면 페이드 아웃에 임의의 효과가 있습니다. 하지만 그 효과가 진행되는 동안 입력하면 모든 것이 끊어집니다. 그래서 어딘가에 휴식이 필요해 지므로 페이딩이 멈추고 즉시 9 div가 표시됩니다. 아이디어가 있으십니까? :/JS 내 무작위 기능을 깨기

+0

애니메이션 콜백을 사용하는 시도하거나 현재 실행중인 애니메이션을 중지 http://api.jquery.com/stop/를 사용해보십시오 ['.delay()'(http://api.jquery.com/delay /), 너무 많은'setTimeout' 대신에. 이 방법으로 효과 대기열을 사용하면 쉽게 [.'stop()'] (http://api.jquery.com/stop/) 할 수 있습니다. – Bergi

답변