スライドショーで画像をすばやく隠す方法はありますか？

Question

タイトルが言うように、私は私のページを読み込むときにイメージを見たいとは思わない。私はスライドショーにthisスクリプトを使用しました。これはコードです：

<div id="slideshow" name="slideshow" class="slideshow"> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide"> 
    </div> 
</div> 

<script> 
    $("#slideshow > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(0) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 10000); 
</script> 

ページが読み込まれると、スライドショーで使用されている4つの画像がすばやく表示されます。その後、jQueryスクリプトはそれらを隠しますが、即座に非表示にする方法はありますか？例：

<div id="slideshow" name="slideshow" class="slideshow"> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide" style="display: none;"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide" style="display: none;"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide" style="display: none;"> 
    </div> 
    <div> 
     <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide" style="display: none;"> 
    </div> 
</div> 

その後、私はそれを再び表示できますか？隠しながら

#slideshow > div ~ div{ 
    display: none; 
} 

は上記のみ表示最初スライド DIVを行います：

$("#slideshow > div:gt(0)").hide(); // so remove this!! 
             // Page is almost entirely rendered and it's 
             // too late to hide images now 

代わりにCSSを使用します。

Answer 1

うん、基本的にはjQueryのを使用して画像を隠すことはできません。他のすべての次の兄弟。
残りのjQueryが残りの処理を行います。

#slideshow > div:not(div:first-child) { 

あなたはポイントを得る：

CSS3を使用すると、また、のようなものを使用することができます。