한 텍스트에서 다른 텍스트로 jQuery 텍스트 페이드 / 전환?

한 텍스트에서 다른 텍스트로 jQuery 텍스트 페이드 / 전환?

---

jQuery는 분명히 텍스트를 쉽게 페이드 인 / 페이드 아웃 할 수 있습니다. 그러나 텍스트를 한 가지에서 다른 것으로 변경하려면 어떻게해야합니까? 전환으로 이런 일이 발생할 수 있습니까?

예:

<div id='container'>Hello</div>

Hello to World 텍스트를 변경할 수 있지만 즉시 변경하는 대신 전환 (페이드 또는 일부 효과 등)으로 변경할 수 있습니까?

---

다음과 같이 콜백을 사용할 수 있습니다.

$("#container").fadeOut(function() {
  $(this).text("World").fadeIn();
});

당신은 여기에서 그것을 시도를 줄 수 있기 때문에 큐가처럼,이 특별한 경우에 작동하는 방법, 또는 이 :

$("#container").fadeOut(function() {
  $(this).text("World")
}).fadeIn();

이 .text()호출 .fadeOut()이 완료되면 다시 페이드 인하기 직전에 호출을 실행 합니다.

---

hide / show 또는 fadeIn / fadeOut을 사용하는 경우 CSS 표시 속성을 변경하기 때문에 "점프"효과가 발생할 수 있습니다. 불투명도로 animate를 사용하는 것이 좋습니다.

이렇게 :

$('#container').animate({'opacity': 0}, 1000, function () {
    $(this).text('new text');
}).animate({'opacity': 1}, 1000);

---

다음은 실제 예 입니다.

(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();

잘 작동한다.

---

내가 생각할 수있는 한 가지 방법은 텍스트가있는 자식 요소를 갖고 시작하는 하나만 표시 한 다음 다른 요소를 차례로 페이드하는 것입니다.

여기를보세요 : http://jsfiddle.net/VU4CQ/

---

텍스트 및 색상 변경, 전환 속도 및 mouseenter에 대한 배열 조회를 사용 하여이 메뉴 에서 다음 과 같이 mouseleave 이벤트를 수행합니다 .

$('#id a').mouseenter(function() {
    $(this).fadeOut(
    eSpeed, function() {
        $(this).text(sayThis[0]);
        $(this).css({
            color: eColor
        });
    }).fadeIn(eSpeed);
});


$('#id a').mouseleave(function() {
    $(this).fadeOut(
    eSpeed, function() {
        $(this).text(sayThat[0]);
        $(this).css({
            color: lColor
        });
    }).fadeIn(eSpeed);
});

---

I would suggest you use basic slider jQuery plugin. Very lightweight (6k) and does what you want and has couple of customization options without all the clutter of most slider plugins. I use it all the time and it's great.

ReferenceURL : https://stackoverflow.com/questions/3670487/jquery-text-fade-transition-from-one-text-to-another