css工作不正常的jQuery動畫

我有一個問題，我的jQuery，我試圖改變我的文章和填充頂部向下滾動時的可見性。問題是我想要做「動畫」變得緩慢，但它會立即改變，而不是緩慢。

這是我科和

<section class="SectionDesignWhite Section2"> 
       <article class="textSec2">LOST OF TEXT</article> 
       <article class="textSec2 PadLeft30">LOST OF TEXT2</article> 
       <article class="textSec2 PadLeft30">LOST OF TEXT3</article> 
     </section>

我的CSS代碼：

.Section2 article { 
    min-width: 300px; 
    max-width: 300px; 
    min-height: 300px; 
    float: left; 
    padding-top: 100px; 
    visibility: hidden; 
}

我的jQuery腳本：

 $(window).scroll(function() { 
     if ($(this).scrollTop() > 450) { 
      $('.Section2 article').css({"visibility": "visible", "padding-top": "50px"}, 'slow'); 
     } 
    });

我希望把我所造的，我清楚什麼試圖創建數小時後陷入困境。似乎無法找到一個可行的答案。

謝謝你看看它。

來源

2014-01-29 Carsten Løvbo Andersen

你不能動畫可視性，你必須改用不透明度。 – adeneo

您可以使用animate()但它只是一些性質的作品，在這種情況下，你不能動畫visibility可以使用opacity這樣的：

CSS

.Section2 article { 
    min-width: 100px; 
    max-width: 100px; 
    min-height: 100px; 
    float: left; 
    background:Red; 
    padding-top: 100px; 
    visibility: hidden; 
    opacity:0;/*Add this*/ 
}

jQuery的

$('.Section2 article').css('visibility', "visible") 
         .animate({paddingTop: "50px", opacity : '1'}, 'slow');

查看此演示http://jsfiddle.net/3gREz/

來源

2014-01-29 20:47:01 DaniP

謝謝，工作得很好。 –

@CarstenLøvboAndersen很高興幫助你 – DaniP

試試這個：

$(window).scroll(function() { 
     if ($(this).scrollTop() > 450) { 
     $('.Section2 article').css('visibility', 'visible').animate({"padding-top": "50px"}, 'slow'); 
    } 
    });

來源

2014-01-29 20:49:14

css工作不正常的jQuery動畫

回答

相關問題