我在尝试使淡入淡出效果正常工作时遇到了一些困难。我认为我过分复杂了。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