Question

我正在开发一个由滑动框组成的jQuery插件，并具有连续幻灯片选项（一种新闻流）。在Firefox，Chrome，Opera，IE，iOS上，一切都很完美，但是（windows）Safari连续滑块存在很大问题。

当我在浏览器中移动光标时，我会遇到奇怪的故障，黑框，如果我触发另一个导航命令，则所有内容都被this result阻止，我必须重新启动浏览器。！

我用来为框设置动画的代码是

     $.fn.animate_pos = function(side, val, duration, easing) {
        return this.each(function() {
            var $obj = $(this);
            if(typeof(easing) == 'undefined') {easing = 'swing';}

            $({Slide : start_val}).clearQueue().animate({Slide : to_val}, {
                easing: easing,
                duration: duration,
                step: function(now, fx) {
                    $obj.set_pos(side, now);
                }
            });
        });
    }


    // set object position for CSS2 or CSS3
    $.fn.set_pos = function(side, val) {
        return this.each(function() {
            var $obj = $(this);

            if(css3_browser) {
                if(side == 'left') {
                    $obj.css('-webkit-transform', 'translate3d('+ val +'px, 0px, 0px)');    
                    $obj.css('transform', 'translate3d('+ val +'px, 0px, 0px)');    
                } else {
                    $obj.css('-webkit-transform', 'translate3d(0px, '+ val +'px, 0px)');    
                    $obj.css('transform', 'translate3d(0px, '+ val +'px, 0px)');        
                }
            }
            else {
                $obj.css(side, val);
            }
        });
    }

该插件也使用CSS3效果。我已经尝试删除任何CSS3代码并在“position”属性上使用动画，但结果是一样的。

任何人都有同样的经历吗？看起来像处理动画的Safari bug。

代码示例http://jsfiddle.net/PsnS3/18/

使用jQuery连续动画的Safari故障

0 个答案: