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

非常感谢任何帮助。

感谢您的回复。

我试图太聪明而且不需要它。有没有办法让fadein和out同时发生而不使用插件？

Answer 1

尝试这样做：

$(".one").fadeIn("slow", function() { $(this).fadeOut("slow") });
$(".two").fadeIn("slow", function() { $(this).fadeOut("slow") });

更新

我误解了你的问题，并认为你想要淡出和淡出。为了使第一个淡入，第二个淡出使用这样的东西：

$(".one").fadeIn("slow");
$(".two").fadeOut("slow");

如果您的其他元素包含one和two类，并且不想影响它们，则可以键入$(".imageHolder .one")和$(".imageHolder .two")而不是$(".one") }和$(".two")。

如果您的网页上有多个imageHolder元素，请按照 epascarello 或 sushanth reddy 的建议使用find()功能。

Answer 2

为什么每个人都选择了它们？

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');

Answer 3

你不需要.each循环..只需在div中找到img并对其进行操作

试试这个..

$('.square').mouseover(function() {

    $(this).find('.two').fadeIn('slow');
    $(this).find('.one').fadeOut('slow');

});

Check FIDDLE

Answer 4

我认为这就是你要找的东西：

  $('.square img')
    .mouseover(function () {
      $(this).fadeIn('slow');
    })
    .mouseout(function () {
      $(this).fadeOut('slow');
    });

Answer 5

我认为你最好使用jquery.hoverIntent.js。当您将光标快速移动到不同的图像上时，它会产生一些延迟时间。

一个例子

$(document).ready(function(){
    var config = {    
     interval: 230,
     over: zoomIn,
     out: zoomOut  
    };

    $("div#clients_wrap div").hoverIntent(config);

    });

zoomIn en zoomOut是函数，你可以分别使用fadein，fadeout声明它们。这只是一种改进。

Answer 6

基本上将一个类分配给需要在悬停/分出时淡入/淡出的图像组

<div class="square">
        <div class="imageHolder">    
            <!--Comment out and uncomment BG image to show transitions on BG images-->    
            <img class="one fadeeffect" src="image_01.jpg" />
            <img class="two fadeeffect" src="image_02.jpg" />
            <img class="three" src="image_03.jpg" />
            <img class="four" src="image_04.jpg" />
        </div>
    </div>

的javascript：

$('.fadeeffect')..hover(function(){
    // write your code here
}

JavaScript淡入/淡出问题

6 个答案: