0

我有一些文本，我已经有 15 种语言的翻译，我在想这是否可能，但我想基本上我有一个按钮，当你点击它时，它会为字符串设置动画一个字母一个字母地翻译，所以我们从 Hello 开始，你点击它会转到 Bonjour 并会为这个过渡设置动画。

这甚至可以使用 jQuery 动画吗？

4

1 回答 1

3

编辑：刚刚注意到您的帖子>>它会为逐字母翻译的字符串设置动画<<

我不确定如何将哪个字母映射到哪个字母。例如：你好 -> 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 回答