0

我一直按照Justin Aguilar 网站的指示向我的网站添加一些 CSS 动画。它组合得很好，看起来相当简单。但是，我在触发入口动画时遇到了一个重大问题。

对此相当陌生，我知道这个问题可能完全是空洞的，但是过去几天我一直在玩弄它，但没有成功。

要创建入口，元素的可见性最初设置为“隐藏”。然后 javascript 应该通过添加 .pullUp 类来触发动画，这会导致元素变得可见和动画。看起来很简单，但是我的所有元素在页面加载后立即开始动画，或者它们仍然不可见。

我真的可以使用一些帮助。这是JFiddle 上代码的链接。 

   <img src="img/apple.png" id="apple" class="pullUp" /> 

   <script= "text/css">

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp; 

    animation-duration: 1.1s;   
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;             
    }
</script>

<script>

$(window).scroll(function() {
  $('#apple').each(function(){
  var imagePos = $(this).offset().top;

  var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+150) {
      $(this).addClass(".pullUp");
    }
  });
</script>

基本上，当图像滚动到时，我只需要我的图像变得可见和动画。

我的网站的引导框架可能是问题的根源，但我不明白为什么会这样。另请注意，我使用外部样式表，为了方便起见，这里只包含了所有代码。非常感谢任何见解或帮助！

4

2 回答 2

0

我注意到在你的 CSS 中你有浮动你没有指定一个位置（即位置：相对或位置：绝对）。这对于这类事情至关重要（编辑：显然不是，如下面的答案所示）。

添加 position:relative 到这些元素后，它似乎可以工作，但是您可能需要修改动画，因为效果似乎非常小。

于 2013-11-15T02:49:04.360 回答
0

我分叉了你的 JSFiddle

  1. });您在代码块的末尾丢失了。这就是 jQuery 不起作用的原因。
  2. 您的图像pullUp已经添加了类，因此动画立即开始。
于 2013-11-15T02:54:35.220 回答