2012-10-02 155 views
0

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

任何帮助将非常感激。

感谢您的回复。

我试图太聪明,它并不需要它。有没有一种方法可以让淡入淡出同时发生而不用插件?

+2

你真的应该,如果你使用hasClass()要去看看它是否有班级。 – epascarello

+0

在代码中发布的答案如果应该同时发生。你是什​​么意思*不使用插件*?不使用jQuery?如果是这样,是否有任何理由不想使用它?嗯,可以这样做,但它需要更多的代码,然后你应该确保它在不同的浏览器上正常工作,因为浏览器的差异。 –

+0

使用jQuery,但没有额外的插件,在一分钟后,它会淡出默认图像,然后淡入新图像。理想情况下,它需要同时发生。 – AidenJH

回答

1

尝试做这样的:

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

更新:

我误解你的问题,我想您想既淡入和淡出。为了使第一个淡入和第二淡出使用这样的事情:

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

如果你有onetwo类等元素,不希望影响到他们,你可以输入$(".imageHolder .one")$(".imageHolder .two")代替的$(".one")$(".two")

如果你有你的页面上有多个imageHolder元素,使用find()功能由epascarello舒尚特·雷迪的建议。

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

谢谢,有没有一种方法的淡入淡出和同时发生,而不使用jQuery以外的插件? – AidenJH

0

你不需要。每个循环..只要找到DIV中的IMG和做您的操作

试试这个..

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

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

});​ 

Check FIDDLE

0

我认为这是你在找什么:

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

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

为例

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

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

    }); 

zoomIn EN缩小(ZoomOut)的功能,你可以用淡入声明它们分别淡出。这只是一个改进。

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 
}