文本輪播交叉淡入淡出效果？

我們試圖實現一個簡單的文本輪播，可以用一些其他詞替換句子中的單個單詞。它們將淡入/淡出，容器寬度應縮小/放大以適應新詞。聽起來很簡單，但我們很難。文本輪播交叉淡入淡出效果？

應該像www.branch.com上的第二行那樣工作。

找不到這個插件？圖像傳送帶肯定，但不是文字，也不是改變前一個容器的文字。

它經過的話，但容器需要改變寬度。

$('#caption p:gt(0)').hide(); 
    setInterval(function() { 
     $('#caption span:first-child').fadeOut('slow') 
      .next('span').fadeIn('slow') 
      .end().appendTo('#caption'); 
    }, 2000);

這是

<div id="caption"> 
     <span>best</span> 
     <span>ultimate</span> 
     <span>excellent</span> 
     <span>fantastic</span> 
    </div>

網站的位置。

#container { 
    position: relative; 
} 

#container p { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

有什麼建議嗎？

來源

2013-05-20 user2272002

我們添加了轉換代碼，但我們隨着寬度更改而丟失。 – user2272002

，你需要增加下列/更改「：

關於CSS ：

#caption需求：

padding：0px;
display：inline-block;
position：relative;
vertical-align：bottom;
過渡：寬度0.25s線性;

#caption > span需求：

位置：絕對;
top：0px;
left：0px;

關於JS：
您需要明確地設置#caption的寬度與所示的元件（每個過渡發生時）的寬度，使用soimething這樣的：

$("#caption").css("width", $(<the_element_to_be_shown>).width());

您還可以設置初始寬度和高度：

$("#caption").css("width", $("#caption > span:first-child").width()); 
$("#caption").css("height", $("#caption > span:first-child").height());

我把它放在一起在這個short demo。

來源

2013-05-20 06:57:02 gkalpak

GENIUS !!感謝您的幫助 – user2272002

總是樂於幫助:)如果此答案幫助您解決問題，請考慮將其標記爲「已接受」，以便將來遇到類似問題的用戶將能夠輕鬆發現問題。 – gkalpak

我希望如果你想獲得更branch.com般的效果，這將這樣的伎倆http://jsfiddle.net/JVuEv/

function ticker() { 
    var caption = $('#caption'); 
    var elements = caption.children(); 
    $(elements[0]).fadeOut('slow', function() { 
     caption.append($(this)); 
     $(elements[1]).show(); 
    }); 
}

來源

2013-05-20 06:47:25

文本輪播交叉淡入淡出效果？

回答

相關問題