0

私はjQueryにかなり慣れていませんが、達成したいことをするものを見つけたり組み合わせたりすることができました。

スクリプトは、ループ内のテキスト/見出しの単語を置き換えます。フェードアウトし、テキストを更新して再びフェードインしますが、私の問題は、文が短くなったり長くなったりすると、見出しまたは段落全体がジャンプすることです。

jsFiddle http://jsfiddle.net/B2eLz/1/の私のコードはこちら

文/段落がジャンプするのを止める滑らかなアニメーションを実装する方法はありますか?

ありがとう

JS:

$(function(){
var words = [
        'breathtaking',
        'excellent',
        'awesome',
        'nice',
        'cool',
        'sweet',
        'extraordinary'
        ], i = 0; // i for counting

    setInterval(function(){
        $('span').fadeOut(function(){ //fadeout text
            $(this).html(words[i=(i+1)%words.length]).fadeIn(); //update, count and fadeIn
        });
    }, 2000 ); //2s
});

HTML:

<h3>This is a <span>extraordinary</span> Headline in a h3-Tag</h3>
4

1 に答える 1

0

問題は、<span>その中のコンテンツだけでなく、それ自体が衰退して崩壊していることです。<span>フェード内のコンテンツと、単語を含むスパンの実際の幅のみが jQuery によって設定されるように、コードを少し修正します。そうすれば、コンテンツはフェードしますが、<span>それ自体は崩壊することなく空のスペース幅をシャントします。フォークして、何ができるか見てみます。

編集:わかりました、これは完璧ではありませんが、問題は単語が異なると単に長さが異なることです。しかし、<span>同じ幅を維持するという概念は機能します。ニーズに合わせて改良する必要があります。これが私がやったことです： http://jsfiddle.net/rHtYA/17/

、&設定spanを持つように調整した CSSの場合:displaytext-alignwidth

span {
    color:red;
    display: inline-block;
    text-align:center;
    width: 120px;
}
于 2013-01-26T06:19:40.490 に答える