jQuery를 사용하여 단어를 연속적으로 표시합니다

Question

나는 특정 클래스 (dim)와 각각 고유 한 ID 인 2 개의 단어 열이있는 페이지가 있습니다. 'Dim'클래스는 단어를 숨겨진 것으로 정의합니다. 버튼을 누를 때 다음 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 초 동안 두는 것입니다. 그런 다음 사라지고 2 열의 단어 1은 2 초 동안 표시됩니다. 그런 다음 Word 2 열 1, Word 2 열 2 등을 켜십시오.

감사

Answer 1

당신은 같은 신분증이 필요하지 않아야합니다 #wrd3 요소 목록을 밟습니다.

나는 당신을 위해 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(), 또는 원하는 다른 애니메이션.