간단한 JQuery 페이드 티커

나는 여러개의 시세표를 살펴 보았고 모두 가중치가 컸다. 필자는 매우 간단한 fadeIn() fadeOut()을 사용하여 제목을 표시하는 요소 목록을 표시하는 JQuery 티커를 사용합니다.간단한 JQuery 페이드 티커

<li>Story 1</li> 
<li>Story 2</li> 
<li>Story 3</li> 
<li>Story 4</li> 
<li>Story 5</li>

다음 기능을 살펴 보았지만 원하는 요소를 표시하는 방법을 모르겠습니다. 그래서 저는 아주 간단한 것을 쫓았습니다. 필요한 것은 루프에서 페이드 아웃 간격과 페이드 인 간격입니다.

출처

2011-03-24 Robin Knight

나는 매우 간단한 페이더를 만들었는데, 매우 가볍습니다. 이미지를 사용하지만 div의 그것을 변경 : 스크립트

var aniSpd01 = 1000; 
var fadeSpd01 = 1000; 

$(function() { 
    var startIndex = 0; 
    var endIndex = $('#aniHolder div').length; 
    $('#aniHolder div:first').fadeIn(fadeSpd01); 

    window.setInterval(function() { 
    $('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01); 
     startIndex++; 
     $('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01); 

     if (endIndex == startIndex) startIndex = 0; 
    }, aniSpd01); 
});

HTML

<div id="aniHolder"> 
    <div>Story 1</div> 
    <div>Story 2</div> 
    <div>Story 3</div> 
</div>

CSS

#aniHolder {width:640px; height:480px; } 
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}

출처

2011-03-24 13:55:33

배경을 피하기 위해 페이드 전환을 제거하려면 ... 사용 된 .delay를 제거하십시오. –

내가 맞으면 startIndex를 -1로 설정해야한다고 생각합니다! – vkampouris

JQuery와에게 Cycle 플러그인을 시도; 나는 회귀 텍스트 링크의 간단한 세트를 만드는 데 사용했습니다. 기본적인 기능과 효과 만 원한다면 멋지게 유지되는 "라이트 - 미니"버전이 있습니다.

출처

2011-03-24 13:57:00 Nick

테스트되지 않음. 이렇게하면 현재 요소가 완료된 후에 다음 요소에서 함께 연결된 체인의 페이드 아웃/인이 재조정됩니다. jQuery WebTicker는 텍스트 링크를 회전시키기위한 아주 좋은 대안도

$(function() { 
    fadeTicker($('li'), $('li:first'), 5000); 
}

출처

2011-03-24 14:02:01 tvanfosson

;로

function fadeTicker($collection, $elem, interval) 
{ 
    var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length)); 
    $(elem).fadeOut(function() { 
      $(next).fadeIn(function() { 
       setTimeout(function() { 
         fadeTicker($collection, $next, interval); 
        }, 
        interval 
       ); 
      }); 
    ); 
);

는 사용 회전 방향과 속도를 완벽하게 제어 할 수 있습니다. 또한 CSS를 사용하여 색상 및 크기의 유연성을 허용합니다. 시세 표시기는 정지 할 수없는 회전을 허용하고 마지막 항목에 도달하면 첫 번째 항목이 곧바로 시작됩니다.

출처

2011-12-08 21:01:25

간단한 JQuery 페이드 티커

답변

관련 문제