jQuery Click功能在Firefox中运行,但不适用于Chrome / Safari

时间:2017-05-11 15:13:45

标签: jquery html css google-chrome cross-browser

我有一个调整div边距的按钮。我有一个函数将进度条的宽度转换为百分比。然后根据单击下一个或上一个按钮时的条形百分比,应用相应的边距。

这在Firefox中工作正常,没有任何错误,但在Safari和Chrome中除了识别点击之外,它根本不工作。进度条不会移动所以看起来像widthPerc函数的问题,因为它没有超过条件。我没有写这个函数(可以在这里找到 - jQuery if width is equal to percentage

我自己的点击功能如下 -

$.fn.widthPerc = function() {
    var parent = this.parent();
    return ~~((this.width() / parent.width()) * 100) + '%';
};
$('.next-q').not('.two-questions .next-q').click(function() {
    var container = $(this).parents().eq(2);
    var questions = container.find('.questions');
    var progress = container.find('.form-progress .bar');
    var prev = container.find('.prev-q');
    var prevone = container.find('.question-steps.questions-one .prev-q');
    var prevs = container.find('.prev-s');
    var complete = container.find('.complete-q, .next-s');
    if (progress.widthPerc() === '66.66%') {
        progress.animate({
            width: '-=33.33%',
        }, 400);
        questions.css({
            'margin-left': '-100%'
        });
        prevs.fadeOut('400', function() {
            prev.fadeIn('400');
        });
        prevone.fadeIn('400');
    } else if (progress.widthPerc() === '33.33%') {
        progress.animate({
            width: '-=33.33%',
        }, 400);
        questions.css({
            'margin-left': '-200%'
        });
        $(this).fadeOut('400', function() {
            complete.fadeIn('400');
        });
    }
});

0 个答案:

没有答案