Question

我尝试在此网站的滑块中模拟效果：http://metalabdesign.com/

这是动画代码：

$('.tagLink').click(function () {
            $('html').css('overflow', 'hidden');
            $('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
            $('#tagBox').show().stop(1).animate({
                marginTop: '-37.5%',
                marginLeft: '-37.5%',
                height: '75%',
                width: '75%',
                opacity: 1
            }, {
                duration: 200,
                specialEasing: {
                    opacity: 'linear',
                    width: 'linear',
                    height: 'linear',
                    marginLeft: 'linear',
                    marginTop: 'linear'
                },
                complete: function () {
                    $(tagBoxContents).fadeTo(200, 1);
                    $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
                    $(window).resize(function () {
                        $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
                    });
                }
            });

tagBoxOverflow和tagBox开始100％宽度＆amp;高度。覆盖层渐渐消失，并且盒子都会淡入和缩小。

以下是您可以直播的网站：http://hashtraffic.com/ 单击“开始”，然后单击“赶时髦的人”，它将执行动画。

为什么这么慢？这是RAW JS的链接：

http://hashtraffic.com/js/HashTraffic.js

我在这里迷路了。我知道我问了很多浏览器，但metalabs做得很好！如果我使用带有js后备的CSS动画会更顺畅吗？

Answer 1

使用css3过渡肯定更顺畅（但IE不会因此而奖励我们。）

但我认为一个主要问题是你的利润。

我会把它定位：绝对。并在右下角和左上角动画。

根据您的操作，浏览器将被强制重排整个页面，但如果您将位置设置为绝对位置，则调整大小不会影响包含元素或其任何父级。

jQuery动画表现不佳。我怎样才能让它更顺畅？

1 个答案: