BUG笔记:Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错

一看这标题就知道无比蛋疼了是不?至少我从来不用安卓自带的浏览器。。。

发现这个bug的场景:万恶的Foundation,它的滚动图片插件Orbit在安卓自带浏览器下手指从左往右滑动时动画仍旧表现为从右往左滑动。只有在安卓自带浏览器下会发生哦!

罪魁祸首是foundation写这个插件时候用jQuery的css动画从'marginLeft':'-100%'到'marginLeft':'0%'来实现从图片从左往右滑动进来。而这个傻浏览器并不认负的百分数,不过能认负的数值。

同时要注意的是,两个百分数要同时改成数值才有效,也就是说-100px到0%的动画也会出错。但100%到0的动画没问题。

以下是修改的代码截取片段:

var SlideAnimation = function (settings, container) {
        var duration = settings.animation_speed;
        var is_rtl = ($('html[dir=rtl]').length === 1);
        var margin = is_rtl ? 'marginRight' : 'marginLeft';
        var animMargin = {};
        //修改前:animMargin[margin] = '0%';
        animMargin[margin] = '0';

        this.next = function (current, next, callback) {
            next.animate(animMargin, duration, 'linear', function () {
                current.css(margin, '100%');
                callback();
            });
        };

        this.prev = function (current, prev, callback) {
            //修改前: prev.css(margin, '-100%');
            prev.css(margin, -prev.width());
            prev.animate(animMargin, duration, 'linear', function () {
                current.css(margin, '100%');
                callback();
            });
        };
    };

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值