JavaScript 淡入/淡出问题

Question

我在尝试让淡入和淡出效果正常工作时遇到一些困难。我认为我把事情复杂化了。

我有 4 张图像，但是只有前 2 张需要在图像悬停时淡出和淡入(其他 2 张图像与页面上的其他一些功能一起使用)。

我的 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');
                }
            });
    });

任何帮助将不胜感激。

感谢您的回复。

我试图变得太聪明，但它不需要它。有没有办法让淡入和淡出同时发生而不使用插件？

Answer 1

为什么要选择每个而不是仅仅选择它们？

var imgs = $(this).find("img");
imgs.filter(".one").fadeOut('slow');
imgs.filter(".two").fadeIn('slow');

或

var imgs = $(this);
imgs.find(".one").fadeOut('slow');
imgs.find(".two").fadeIn('slow');