我在嘗試使淡入淡出效果正常工作時遇到了一些困難。我認爲我過分複雜了。JavaScript淡入淡出問題
我有4張圖片,但只有前兩張需要淡出,並懸停在圖片上(其他兩張圖片與頁面上的其他功能一起使用)。
我的HTML是:
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one" src="image_01.jpg" />
<img class="two" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
形象,二,三,四,顯示無
JS:
$('.square').mouseover(function() {
$(this).find('img').each(function() {
if ($(this).attr('class') === 'two') {
$(this).fadeIn('slow');
}
if ($(this).attr('class') === 'one') {
$(this).fadeOut('slow');
}
});
});
任何幫助將非常感激。
感謝您的回覆。
我試圖太聰明,它並不需要它。有沒有一種方法可以讓淡入淡出同時發生而不用插件?
你真的應該,如果你使用hasClass()要去看看它是否有班級。 – epascarello
在代碼中發佈的答案如果應該同時發生。你是什麼意思*不使用插件*?不使用jQuery?如果是這樣,是否有任何理由不想使用它?嗯,可以這樣做,但它需要更多的代碼,然後你應該確保它在不同的瀏覽器上正常工作,因爲瀏覽器的差異。 –
使用jQuery,但沒有額外的插件,在一分鐘後,它會淡出默認圖像,然後淡入新圖像。理想情況下,它需要同時發生。 – AidenJH