Question

我创建了一个文本旋转器，它使用速度和间隔来确定旋转文本的速度和时间。一切似乎都运转正常，我唯一的问题就是转换之间的闪烁。换句话说，我可以一起看到旧的和新的条目。有人可以帮我避免这个吗？

(function($) {
    $(document).ready(function(){
        //<![CDATA[
        (function($) {
            $.fn.rotator = function(settings) {
                settings = jQuery.extend({
                    interval: 5000,
                    speed:800,
                }, settings);

                return this.each(function() {
                    var $t = $(this),
                        $item = $t.children().addClass('item').hide();

                    $t.addClass('rotator');

                    if ($item.length > 1) {
                        $item.first().addClass('current').fadeIn(settings.speed);
                        setInterval(function() {
                            var c = $t.find('.current');
                            if (c.next().length === 0) {
                                c.removeClass('current').fadeOut(settings.speed);
                                $item.first().addClass('current').fadeIn(settings.speed);
                            } else {
                                c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
                            }
                        }, settings.interval);
                    }
                });
            };
        })(jQuery);

        // Execute here!
        $(function() {
            $('#slider').rotator();
        });
        //]]> 
    });
})(jQuery);

Answer 1

将所有内容放入fadeOut()的回调函数中可以正常工作：

c.fadeOut(settings.speed, function () {
  $(this).removeClass('current')
         .next().addClass('current')
         .fadeIn(settings.speed)
});

小提琴：http://jsfiddle.net/5p7dych6/
更新小提琴：http://jsfiddle.net/c6yrzsvr/

使用JQuery旋转文本是闪烁的

1 个答案: