我有一組淡出和淡入當他們各自的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}
我們可以看到運行此代碼的HTML嗎? –
請縮進您的代碼以獲得更好的可讀性。您可以使用http://jsbeautifier.org/快速執行此操作。 – Yoshi
我已經包含了HTML,爲了您的方便,刪除了p標籤中的荷蘭語亂碼。 –