Question

我在新网站上玩过动画顶栏。它适用于Firefox，但不适用于IE / Chrome / Safari。这是代码的JSFiddle（由于某种原因，它不想在这里运行，但至少你可以看到我在做什么）

CSS：

#sky-header {
  background: #5ba0f8;
  width: 100%;
  height: 100px;
}
#nav-bar-top {
  background: #228D00;
  width: 100%;
  height: 50px;
  padding-top: 4px;
  padding-left: 10px;
}

jQuery的：

toggleSun();
setTimeout( function() { toggleCloud1(); },1000);
setTimeout( function() { toggleCloud2(); },2000);
function toggleSun() {
    $("#sun").animate({
        left: ($(document).width()/2)+"px"
        }, 10000, 'linear', function() {
            $("#sun").animate({
                left: ($(document).width()/2 - 30)+"px"
                }, 10000, 'linear', function() { toggleSun(); });
        });
}
function toggleCloud1() {
    $("#cloud1").animate({
        left: ($(document).width()+200)+"px"
        }, 50000, 'linear', function() {
            $("#cloud1").css('left',"-400px");
            toggleCloud1();
        });
}
function toggleCloud2() {
    $("#cloud2").animate({
        left: ($(document).width()+200)+"px"
        }, 43000, 'linear', function() {
            $("#cloud2").css('left',"-600px");
            toggleCloud2();
        });
}

我猜测它与我浮动元素的方式有关，然后执行left负像素，使它们离开屏幕（在它们返回之前）开始，然后重启）

我知道我可以用CSS3动画做到这一点，但是我无法让那些工作（似乎没有出现任何原因）。我也不确定将物品从一端移到另一端是多么容易，即使在不同的屏幕上也是如此。

Answer 1

overflow:hidden;

需要#sky-header

为什么这个动画会让我的iPad上的屏幕更宽？

1 个答案: