Question

我已经尝试了好几天来弄清楚这里出了什么问题并且无法破解它。我有两个容器。第一个具有固定位置的背景图像，其样式如下：

#first-window {
    background: url(http://www.noticeeverythingcreative.com/img/cinque.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
    height: 100vh;
    width: 100vw;
}

第二个是相同的，但没有背景：

#second-window {
    height: 100vh;
    width: 100vh;
}

然后我有一个汉堡菜单，当点击它时，会弹出一个不透明的包装，动画到一个关闭按钮，并将导航窗格从屏幕外的位置拉出来。

这是JS：

$(document).ready(function(){
/*========================================================================
                           Navigation
===========================================================================*/

    $('a.menu, #fade-wrapper').click(function() {
        var clicked = $(this);
        if (clicked.is(fadeWrapper) || clicked.hasClass('open')) {
            closeMenu();
        } else {
            openMenu();
    });


/*=========================================================================
                       Variables and Functions
===========================================================================*/

    var nav = $('nav'),
        barOne = $('.menu-bar-top'),
        barTwo = $('.menu-bar-bottom'),
        barThree = $('.menu-bar-mid'),
        menuTrigger = $('a.menu'),
        fadeWrapper = $('#fade-wrapper'),
        footerHidden = $('footer.hidden'),
        bar = $('.bar');

    function transformMenu(top, transform) {
        return {
            'top': top,
            'transform': transform,
            '-webkit-transform': transform,
            '-moz-transform': transform,
            '-ms-transform': transform,
            '-o-transform': transform
        };
    }

    function openMenu() {
        fadeWrapper.stop(true, true).fadeIn(500);
        menuTrigger.addClass('open');
        $('html, body').css('overflow', 'hidden');
        nav.stop(true, true).animate({'left': '+=145px'}, 200);
        footerHidden.stop(true, true).animate({'bottom': '+=80px'}, 200);
        barOne.css(transformMenu('18px', 'rotate(405deg)'));
        barTwo.css(transformMenu('18px', 'rotate(-405deg)'));
        barThree.fadeOut(1);
        bar.not(barThree).css('background', '#66e2e3');
        barThree.css('background', '#303030');
    }

    function closeMenu() {
        menuTrigger.removeClass('open');
        $('html, body').css('overflow', '');
        nav.stop(true, true).animate({'left': '-=145px'}, 200);
        footerHidden.stop(true, true).animate({'bottom': '-=80px'}, 200);
        bar.css('background', '');
        barOne.css(transformMenu('13px' , 'rotate(360deg)'));
        barTwo.css(transformMenu('23px', 'rotate(-360deg)'));
        barThree.fadeTo(200, 1);
        fadeWrapper.stop(true, true).fadeOut(500);
    }
});

信不信由你，我已经大幅削减了这一点。在第一个窗口中触发openMenu()或closeMenu()时，Firefox中会出现此问题。动画只是不稳定，当#fade-wrapper淡入或淡出时，屏幕会间歇性地闪烁白色。相同的动画在#second-window上看起来很漂亮和平滑，唯一的区别是它没有背景图像。

这是一个小提琴：http://jsfiddle.net/q8GJL/2/

问题在那里更加微妙，我想是因为除了最基本的动画之外我都遗漏了。您可以更轻松地在实际网站上看到问题：http://www.noticeeverythingcreative.com

想法？

Firefox - Choppy Animations＆amp;固定位置背景图像的效果

0 个答案: