0

いくつかのテキストがあり、すでに 15 の言語に翻訳されています。これが可能かどうかを考えようとしていますが、基本的にはボタンがあり、クリックすると文字列がアニメーション化されるようにしたいと考えています。文字ごとに翻訳されるので、Hello から始めてクリックすると、Bonjour に移動し、そのトランジションがアニメーション化されます。

jQueryアニメーションを使用しても可能ですか?

4

1 に答える 1

3

編集：あなたの投稿に気づきました>>文字列が文字ごとに翻訳されてアニメーション化されます<<

どの文字を何にどのようにマッピングできるかわかりません。例: Hello -> Bonjour - 文字 H をどのようにマッピングしますか。また、ページ全体が翻訳されるまでにかかる時間を想像してみてください。

ユーザーにとってもより良い、テキスト全体fadeOut / fadeInのような単純なアニメーションを使用することをお勧めします。下記参照、

マークアップ:

<div id="test">Hello</div>
<button>Translate</button>

JS:

$('button').click (function () {
    $('#test').fadeOut(500, function () {
       $(this).html('Bonjour').fadeIn(300);
    });
});

デモ

編集:以下のコードは、グラデーション フェージングの大まかなバージョンです。アニメーションの順序は次のとおりです。

  1. コンテンツの不透明度を 1 から 0 にアニメーション化します。
  2. オーバーレイを表示し、オーバーレイの幅を 10 からコンテンツの幅に増やして、シャッター効果を与えます。オーバーレイの背景はグラデーション透過なので、グラデーション フェード効果が得られます。
  3. 翻訳されたメッセージをコンテンツに更新し、コンテンツの不透明度を 0 から 1 にアニメーション化します。
  4. オーバーレイの幅をコンテンツの幅から 0 にアニメーション化し、非表示にします。

効果はまだ優雅ではありませんが、コードは正常に動作するはずです.CSS を調整する必要がある場合があり (以下の手順を参照)、アニメーションの遅延を調整して、好みの効果を得ることができます。

デモ: http://jsfiddle.net/9dq3U/7/ (動作を理解するために期間を調整してください)

$(function() {
    var $test = $('#test');
    var $overlay = $('.overlay');

    var tmsg = 'Bonjour<p>C\'est le message de test</p><p>Pour démontrer l\'effet de fondu</p>';

    $overlay.css({
        'width': 10,
        'height': $test.outerHeight()
    }).position({
            of: $test,
            my: 'left top',
            at: 'left top'
    });

    $('button').click(function() {

        $test.animate({
            opacity: 0
        }, 1000);

        $overlay.show().animate({
            'width': ($test.width() + $test.width()/2) //Adjust this as you need
        }, 600, function() {

            $overlay.css('width', $test.width()); //Adjust this as you need

            $test.html(tmsg).animate({
                'opacity': 1
            }, 200);
            $overlay.animate({
                'width': 0
            }, 1500, function() {
                $(this).hide();
            });            
        });
    });
});

また、以下はオーバーレイのグラデーション透明背景のCSSです。

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 38%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,1)), color-stop(38%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 38%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 38%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 38%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 38%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */

もちろん、私は上記を書いていません.. Ultimate CSS グラデーションの助けを借りて生成されました..

  1. プリセットを変更します（私は右上の最後のものを使用しました）
  2. 方向を水平に変更します
  3. 透明度レベルを変更します (下のスライダーは、透明度をどの程度にするかを示しています)。
  4. CSS をコピーしてフィドルに貼り付けます (FF 12 でテストする時間しかなく、うまく機能します)。

幸運を！助けが必要な場合はお知らせください。

于 2012-06-05T20:19:00.267 に答える