자바 스크립트 간격에 페이드 효과 사용

MariaL

몇 초마다 단어를 변경하는 자바 스크립트 기능이 있습니다. 다음은 코드입니다.

<div id="changeText" >Hello</div>

 <script type="text/javascript">
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 5000);
function change() {
 elem.innerHTML = text[counter];
    counter++;
    if(counter >= text.length) { counter = 0; }
}
</script>

이것은 잘 작동하지만 텍스트를 페이드 인 / 페이드 아웃하는 방법이 있는지 궁금합니다.

라이드 론 89

내가 할 일은 다음과 같습니다. 텍스트를 페이드 아웃하고 변경 한 다음 다시 페이드 인합니다.

var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");

setInterval(change, 1500);

function change() {
  $(elem).fadeOut('fast', function() {
    $(elem).text(text[counter++]);

    if (counter >= text.length) {
      counter = 0;
    }

    $(elem).fadeIn('fast');
  });
}

https://jsfiddle.net/r6h4xw5s/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트 사용자 정의 스크립트의 페이드 효과 속성 / 기능?

분류에서Dev

자바 스크립트 : 페이드 효과로 루프에서 <img> 변경

분류에서Dev

"더로드" "간단히 표시"자바 스크립트에 페이드 인 아웃 효과를 적용하는 방법

분류에서Dev

자바 스크립트를 사용하여 창 페이드를 만들거나 CSS에 전환 효과를 추가 할 수 없습니다.

분류에서Dev

자바 스크립트에서 페이드 인 / 페이드 아웃 효과 만들기

분류에서Dev

웹 페이지 / 자바 스크립트에서이 효과를 수행하는 데 사용되는 것은 무엇입니까?

분류에서Dev

자바 스크립트를 사용하여 Iframe에 페이지로드

분류에서Dev

페이드 인 및 아웃 간격 자바 스크립트

분류에서Dev

자바 스크립트에서 직사각형이 아닌 모양에 베벨 효과 만들기

분류에서Dev

텍스트 필드에 값이있을 때 자바 스크립트 체크 박스 유효성 검사

분류에서Dev

자바 스크립트를 사용하여 가격 필드 유효성 검사 jquery?

분류에서Dev

자바 스크립트를 사용하여 파일 페이지 유효성 검사 업로드

분류에서Dev

텍스트 / 자바 스크립트 코드에서 onclick 사용

분류에서Dev

CSS에서 Chrome과 Safari 사용자 에이전트 문자열 구분 (자바 스크립트 없음)

분류에서Dev

자바 스크립트에서 정규식으로 사용자 이름 유효성 검사

분류에서Dev

자바 스크립트에서 사용자 정의 된 이메일 유효성 검사

분류에서Dev

자바 스크립트에서 스플 라이스 기능과 함께 적용 사용

분류에서Dev

자바 스크립트를 사용하여 원격 XML을 생성하고 웹 페이지에서 사용

분류에서Dev

자바 스크립트에 대한 날짜 유효성 검사 의사 코드

분류에서Dev

자바 스크립트 코드로 새 페이지에서 사용자에게 리디렉션

분류에서Dev

유효성 검사에 실패하면 자바 스크립트 코드 종료

분류에서Dev

자바 스크립트를 사용하여 Firestore에서 웹 페이지로 제품 데이터로드

분류에서Dev

자바 스크립트에서 const 키워드 사용

분류에서Dev

자바 스크립트에서 'this'키워드 사용

분류에서Dev

크롬 확장 프로그램과 유사하게 브라우저의 모든 페이지에서 자바 스크립트 코드를 실행합니다.

분류에서Dev

오프라인 페이지에서 자바 스크립트 사용

분류에서Dev

자바 스크립트로 HTML 페이지에서 YouTube API 사용

분류에서Dev

자바 스크립트를 사용하여 두 페이지에 인쇄

분류에서Dev

c #을 사용하여 asp.net에서 페이지로드시 자바 스크립트 함수 호출

Related 관련 기사

  1. 1

    자바 스크립트 사용자 정의 스크립트의 페이드 효과 속성 / 기능?

  2. 2

    자바 스크립트 : 페이드 효과로 루프에서 <img> 변경

  3. 3

    "더로드" "간단히 표시"자바 스크립트에 페이드 인 아웃 효과를 적용하는 방법

  4. 4

    자바 스크립트를 사용하여 창 페이드를 만들거나 CSS에 전환 효과를 추가 할 수 없습니다.

  5. 5

    자바 스크립트에서 페이드 인 / 페이드 아웃 효과 만들기

  6. 6

    웹 페이지 / 자바 스크립트에서이 효과를 수행하는 데 사용되는 것은 무엇입니까?

  7. 7

    자바 스크립트를 사용하여 Iframe에 페이지로드

  8. 8

    페이드 인 및 아웃 간격 자바 스크립트

  9. 9

    자바 스크립트에서 직사각형이 아닌 모양에 베벨 효과 만들기

  10. 10

    텍스트 필드에 값이있을 때 자바 스크립트 체크 박스 유효성 검사

  11. 11

    자바 스크립트를 사용하여 가격 필드 유효성 검사 jquery?

  12. 12

    자바 스크립트를 사용하여 파일 페이지 유효성 검사 업로드

  13. 13

    텍스트 / 자바 스크립트 코드에서 onclick 사용

  14. 14

    CSS에서 Chrome과 Safari 사용자 에이전트 문자열 구분 (자바 스크립트 없음)

  15. 15

    자바 스크립트에서 정규식으로 사용자 이름 유효성 검사

  16. 16

    자바 스크립트에서 사용자 정의 된 이메일 유효성 검사

  17. 17

    자바 스크립트에서 스플 라이스 기능과 함께 적용 사용

  18. 18

    자바 스크립트를 사용하여 원격 XML을 생성하고 웹 페이지에서 사용

  19. 19

    자바 스크립트에 대한 날짜 유효성 검사 의사 코드

  20. 20

    자바 스크립트 코드로 새 페이지에서 사용자에게 리디렉션

  21. 21

    유효성 검사에 실패하면 자바 스크립트 코드 종료

  22. 22

    자바 스크립트를 사용하여 Firestore에서 웹 페이지로 제품 데이터로드

  23. 23

    자바 스크립트에서 const 키워드 사용

  24. 24

    자바 스크립트에서 'this'키워드 사용

  25. 25

    크롬 확장 프로그램과 유사하게 브라우저의 모든 페이지에서 자바 스크립트 코드를 실행합니다.

  26. 26

    오프라인 페이지에서 자바 스크립트 사용

  27. 27

    자바 스크립트로 HTML 페이지에서 YouTube API 사용

  28. 28

    자바 스크립트를 사용하여 두 페이지에 인쇄

  29. 29

    c #을 사용하여 asp.net에서 페이지로드시 자바 스크립트 함수 호출

뜨겁다태그

보관