Question

我有一些文字，我已经有15种语言的翻译，我试着想，如果这是可能的，但我想基本上我有一个按钮，当你点击它，它会为逐字母翻译的字符串设置动画，所以我们从Hello开始，然后点击它进入Bonjour并为该过渡设置动画。

甚至可以使用jQuery动画吗？

Answer 1

修改：刚发现你的帖子＆gt;＆gt; 它将为逐字母翻译的字符串设置动画＆lt;＆lt;

我不知道你怎么能把这封信写成什么。 例如：您好 - ＆gt; 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);
    });
});

DEMO

编辑：下面的代码是渐变渐变的粗略版本。动画的顺序如下，

将内容的不透明度从1设置为0。
显示叠加层并将叠加层的宽度从10增加到内容宽度以产生快门效果。叠加层的背景是渐变透明的，因此它会产生渐变褪色效果。
将已翻译的消息更新为内容，并将内容的不透明度设置为0到1。
将叠加宽度从内容宽度设置为0并隐藏。

效果仍然不优雅，但代码应该可以正常工作..您可能需要调整CSS（请参阅下面的说明）和动画延迟以获得您喜欢的效果。 < / p>

DEMO： 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 gradient ..

更改预设（我最后一个使用右上角）
将方向更改为水平
更改透明度级别（下方的滑块显示您希望它透明的程度）
复制CSS并粘贴小提琴（我只有时间在FF 12中进行测试，效果很好）

jQuery使用动画翻译文本字符串？

1 个答案: