2013-01-08 79 views
1

我有一組淡出和淡入當他們各自的menulink點擊。第一個div應該在頁面加載時自動加載而沒有任何淡化,並且如果沒有加載內容,那麼應該只有淡入效果。 現在我已經完成了除第一個div的即時加載之外的所有操作。當我加載頁面時,沒有內容存在,淡出發生,然後第一個div自動淡入。 我如何確保第一個div自動加載而沒有任何淡化?JQuery淡入淡出

當前代碼:

$(document).ready(function() { 
    $('a').bind("click", function() { 
    $('a').removeClass("actief"); 
    $(this).addClass("actief"); 
    var fade = $(this); 

    if ($('#content').html()) { 
     $(this).addClass("actief"); 
     $('#content').stop().fadeTo(500, 0, function() { 
     $('#content').html("").css('opacity', 0); 
     fade.next().clone().appendTo('#content'); 
     $('#content').stop().fadeTo(500, 1); 
     }); 
    } else { 
     $('#content').css('opacity', 0); 
     fade.next().clone().appendTo('#content'); 
     $('#content').stop().fadeTo(500, 1); 
    } 
    }); 

    $('a:first').trigger('click'); 
}); 

HTML:

這是HTML

<body> 
    <div id="container"> 
     <div id="menudiv"> 
      <ul id="menu"> 
       <li> 
        <a>About</a> 
        <div> 
         <H1>About</H1> 
          <img src="pic.png"> 
          <p></p> 
        </div> 
       </li> 
       <li> 
        <a>Knowledge</a> 
        <div> 
         <H1>Knowledge</H1> 
          <img src="pic.png"> 
          <p></p> 
        </div> 
       </li> 
       <li> 
        <a>Expectations</a> 
        <div> 
         <H1>Expectations</H1> 
          <img src="pic.png"> 
          <p></p> 
        </div> 
       </li> 
       <li> 
        <a>More</a> 
        <div> 
         <H1>More</H1> 
          <img src="pic.png"> 
          <p></p> 
        </div> 
       </li> 
      </ul> 
    </div> 

    <div id="content"> 

    </div> 
</div> 

</body> 

CSS

*{ 
    margin:0px; 
    padding:0px; 
} 

#container{ 
    width:800px; 
    height:600px; 
    margin:auto; 
    background-color:#6CF; 
} 

#menudiv{ 
    width:800px; 
    background-color:#066; 
    height:50px; 
    float:left; 
    margin-top:20px; 
    border-bottom:2px solid orange; 
} 

#content{ 
    width:800px; 
    background-color:#069; 
    height:400px; 
    float:left; 
} 

#content p{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color:white; 
    padding:10px; 
} 

#content img{ 
    border: 2px solid white; 
    margin-left:10px; 
    float:left; 
    margin-right:10px; 
} 

H1{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:16px; 
    color:white; 
    padding:10px; 
} 

ul li{ 
    list-style-type:none; 
    float:left; 
    margin:10px; 
    background-color:black; 
    color:white; 
    border:2px solid white; 
    padding:4px; 
} 

ul li div{ 
    display:none; 
    text-decoration:line-through; 
} 

ul li .actief{ 
    color:orange; 
} 

#menu ul li div{display:none} 
#menu ul li:first-child div{display:block} 
+1

我們可以看到運行此代碼的HTML嗎? –

+2

請縮進您的代碼以獲得更好的可讀性。您可以使用http://jsbeautifier.org/快速執行此操作。 – Yoshi

+0

我已經包含了HTML,爲了您的方便,刪除了p標籤中的荷蘭語亂碼。 –

回答

0

您可以通過CSS做到這一點,

#menu ul li div{display:none} 
#menu ul li:first-child div{display:block} 

然後它會重置頁面加載

(你可能想使你的CSS多一點,雖然具體的)

更新我:

哎呀,didnt現貨.clone( )位,而不是.trigger(「click」),你可以用這個...

$('a:first')。next()。clone()。appendTo('#content');

這將在第一個div複製到你描述

更新II頁面正文:

爲了保持.trigger()如果。點擊是由一個真實的點擊觸發的,你可以檢測到(見here),然後繞過點擊功能中的.fade效果(或者可能有101種其他方式來做到這一點!)

+0

我將添加CSS。 仍從第一個鏈接淡出並進入內容。 –

+0

啊,是的,忽略該CSS,試試更新的答案 – DaveB

+0

謝謝它現在的作品!有沒有辦法在保持觸發的同時做到這一點? –