jquery의 텍스트 슬라이드 쇼

Question

기본적으로 두 개의 텍스트 요소 만있는 슬라이드 쇼를 만들려고합니다. 하나는 연락처 번호입니다. 다른 하나는 이메일 ID이며, 연속 실행시 변경해야합니다. onclick 또는 onfocus와 같은 이벤트는 없으며 이러한 요소는 가로로 세로로 이동해야합니다.

도움말.

Answer 1

원하는 jQuery 플러그인이 이미있을 것입니다.하지만 몇 가지 라인만으로 구현할 수있는 개념으로 머리 위로 떠오르는 간단한 내용이 있습니다.

div 요소로 슬라이드하려는 내용을 컨테이너 div 안에 넣으십시오. 첫 번째 자식 div 만 표시되도록 컨테이너의 높이를 자식 div의 높이로 설정하고 오버플로를 숨 깁니다. 첫 번째 자식을 슬라이드하여 숨기고 자동으로 다음 자식을 뷰로 가져옵니다. 첫 번째 자식을 컨테이너의 맨 아래로 옮기고 다시 보이게합니다 (실제로 보이지는 않지만 컨테이너 아래쪽에 숨겨져 있기 때문에). 영원히 반복하십시오.

코드가 현재 첫 번째 코드와 아무 관계가 없기 때문에 몇 개의 하위 div를 넣을 지 중요하지 않습니다. (그래서 나는 여기에 연락처와 이메일을 표시했지만 내 working demo에는 몇 가지 추가 사항을 추가했습니다).

<div id="slideContainer"> 
    <div>Contact No: 555-666-7777</div> 
    <div>Email: me@me.com</div> 
</div> 

<script> 
$(function() { 
    $("#slideContainer").css({ 
     "height" : $("#slideContainer div:first").css("height"), 
     "overflow" : "hidden" 
    }); 

    function slide() { 
     $("#slideContainer div:first").slideUp(800, function() { 
      var $this = $(this); 
      $this.parent().append(this); 
      $this.show(); 
      slide(); 
     }); 
    } 
    slide(); 
}); 
</script> 

데모 : http://jsfiddle.net/VFB3C/

가 다시 이것이 내가 질문을 읽으면서 나에게 발생 그냥 뭐,하지만 당신은 의심의 여지가 jQuery's animation methods 및/또는 자바 스크립트의 setTimeout() 또는 setInterval() 방법을 사용하여 비슷한 일을 할 수 없다.