0

我在尝试让我的淡入淡出效果正常工作时遇到了一些困难。我想我把它复杂化了。

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

任何帮助将非常感激。

感谢您的回复。

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

4

6 回答 6

1

尝试这样做：

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

更新：

我误读了你的问题，并认为你想要淡入淡出。要使第一个淡入和第二个淡出，请使用以下内容：

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

如果您有其他带有oneandtwo类的元素并且不想影响它们，您可以输入$(".imageHolder .one")and$(".imageHolder .two")而不是$(".one")and $(".two")。

如果您imageHolder的页面上有多个元素，请使用epascarello或sushanth reddyfind()建议的函数。

于 2012-10-02T17:27:39.867 回答
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');
于 2012-10-02T17:27:52.973 回答
0

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

<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
}
于 2012-10-02T17:36:14.340 回答
0

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

试试这个。。

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

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

});​

检查小提琴

于 2012-10-02T17:29:22.750 回答
0

我想这就是你要找的：

  $('.square img')
    .mouseover(function () {
      $(this).fadeIn('slow');
    })
    .mouseout(function () {
      $(this).fadeOut('slow');
    });
于 2012-10-02T17:30:31.343 回答
0

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

一个例子

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

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

    });

zoomIn 和 zoomOut 是函数，你可以分别用淡入和淡出声明它们。这只是一个改进。

于 2012-10-02T17:32:42.560 回答