使用CSS動畫備忘錄時Div跳轉

我剛剛在我的網站上添加了CSS animation cheat sheet。但是現在，當我向下滾動到已實施動畫的圖像時，div會展開到頁面的底部。動畫完成後，div大小再次正常。使用CSS動畫備忘錄時Div跳轉

HTML：

<div class="wrapper portfolio"> 
    <span class="spacer"></span> 

    <div id="pic-wrap"> 
    <img class="pic" src="http://multy-service.ru/media/pictures/imac-3.png" alt="Imac" width="450px"/> 
    </div> 

    <div class="text-wrap"> 
     <h1> 
      Webdesign sample text 
     </h1> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ipsum blandit, tristique risus vel, volutpat rbi at lacus et dolor tincidunt pretium sollicitudin in leo. 
      <a href="">Lees meer...></a> 
     </p> 
    </div>

CSS：

#pic-wrap{ 
float: right; 
visibility: hidden; 
backface-visibility: hidden; 
}

的jQuery：

<script> 
    $(window).scroll(function() { 
     $('.pic').each(function(){ 
     var imagePos = $(this).offset().top; 

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

可能是什麼PROBL他們嗎？

來源

2014-04-01 Kees Sonnema

這很難測試它，因爲我總是不得不刷新te頁te看到效果，我只能猜測什麼問題可能是。

也許是因爲您的默認（iMac）圖像高度超過890像素。嘗試添加較小高度的圖像。你也可以嘗試設置div滑塊溢出：隱藏和固定高度/或最大高度。

編輯：

嘗試

#slide5 { 
z-index: 99999; 
}

希望它可以幫助

來源

2014-04-01 14:33:05 Mike

的Z-指數的伎倆！非常感謝。 –

歡迎您！祝您有個更好的發展，網站看起來不錯！ – Mike

使用CSS動畫備忘錄時Div跳轉

回答

相關問題