jquery - jquery 旋转文本动画（重新创建 css3 效果）

Question

有人知道是否有一个 jquery 插件可以做类似这种效果的事情吗？ http://tympanus.net/Tutorials/CSS3RotatingWords/index5.html

我喜欢这个效果，但我需要它兼容到 IE7，或者至少，只在 IE9/8/7 中显示那些旋转单词的文本

Answer 1

在 jQuery 之后将此添加到页面（可能在单独的 js 文件中）

(function($){
    $.fn.rotate = function(params){
        return this.each(function(index, el){
            var defaults = {
                text : [],
                interval : 2000
            };

            var options = $.extend({}, defaults, params);
            var i = 0;

            if(options.text.length){
                setInterval(function(){
                    i = i < options.text.length -1 ? ++i : 0;
                    $(el).fadeOut(function(){ 
                        $(this).text(options.text[i]).fadeIn();
                    });
                }, options.interval);
            }
        });
    };
})(jQuery);

要使用它，只需执行

$(selector).rotate({ 
    text: ['text1', 'text2'] // an array of strings
    interval: 2000 // Optional. number in milliseconds, I've put default as two seconds  
});

看看小提琴：http: //jsfiddle.net/U9ZTa/1/

您可以根据需要进行更改。褪色效果应该适用于所有浏览器 IE6+。

如果您愿意，可以在现代浏览器中添加该 css 动画...

Answer 2

这可能会有所帮助 - jQuery 简单文本旋转器：http ://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

您可能需要对此进行调整，以便能够对您提供的链接产生相同的效果。