단어를 연속적으로 표시하기 위해 jquery를 사용합니다.

Question

단어가 2 열이고, 특정 클래스 (희미한)와 고유 한 ID를 가진 페이지가 있습니다. '희미한'클래스는 단어를 숨겨진 것으로 정의합니다. 나는 버튼을 누르면 다음과 같은 jQuery 코드 실행이 : 나는 각 단어가 표시되었을 것을 볼 수 있어요 다음 돼있처럼 다시 숨 깁니다 경고 행의 주석을 해제

$().ready(function() 
    { 
    var x = 20; // will be dynamic later :-) 
    $("#btn1").click(function() 
     { 
     for(i=1 ; i <= x ; i++) 
      { 
      //alert(i); 
      $(".dim").removeClass("hilite"); 
      // this 'turns off' all the words 
      $("#wrd-"+i).addClass("hilite"); 
      // this turns on the i'th word 
      } 
     }); 
    }); 

. 유일한 문제는 너무 빨리 발생한다는 것입니다. 나는 각 루프가 주어진 수의 나노초를 기다리는 방법을 원한다. setTimeout 메서드를 시도했지만 아무것도 할 수 없습니다. 이 아이디어를 어떻게 느리게 할 수 있을까요? .show와 .hide를 사용하여 시도했지만 모든 효과가 한 번에 발생하는 것 같습니다.

제 목표는 열 1의 첫 번째 단어를 2 초 동안 표시하는 것입니다. 그런 다음 두 번째 열의 단어 1이 2 초 동안 표시됩니다. 그런 다음 단어 2 열 1을 입력 한 다음 단어 2 열 2를 입력합니다.

감사

Answer 1

당신은 요소의 목록을 단계로 #wrd3 같은 ID를 필요가 없습니다.

DOM 선택을 맞춤 설정하지 않았지만이 코드는 세트의 각 항목을 잠시 동안 표시하고 숨 깁니다. 간격이 .fadeIn이면 .fadeOut() 기능이 시작되기 전에 해당 항목이 약 시간 동안 표시됩니다. 물론

var things = $('.foo'); 
var index = 0; 
things.hide(); 
var showHide = function() { 
    things.eq(index).fadeIn(2000,function(){ 
    $(this).fadeOut(2000); 
    }); 
    index++; 
    setTimeout(showHide,3000); 
}; 

showHide(); 

, 당신은 .show() 및 .hide(), 또는 다른 어떤 애니메이션 당신이 원하는에 페이드를 변경할 수 있습니다.