Jquery悬停功能不能按预期工作

我希望让用户能够查看我开发的网站的完整屏幕截图，然后当他们将鼠标悬停在另一个div上时，会显示一些元信息。Jquery悬停功能不能按预期工作

这里是一个测试环节 - http://www.deanelliott.me/misc/test-port/index.html

正如你所看到的，如果你将鼠标悬停在覆盖出现这是很好的，但是当你将鼠标悬停关闭它和下一张幻灯片进场覆盖是可见的幻灯片当它不应该。

如果任何人有什么想法是什么问题将是伟大的！

感谢

编辑：下面是相关代码

$(function(){ 
$('#slideshow').hover(
    function(){ 
      $('.slideimage').fadeOut(100, function(){ 
        $('.slideoverlay').fadeIn(100);            
      }); 
    }, 
    function(){ 
      $('.slideoverlay').fadeOut(100, function(){ 
        $('.slideimage').fadeIn(100);           
      }); 
    } 
    ); 
});

.slideoverlay设置为显示：通过CSS

来源

2012-02-17 Dean Elliott

**注意：**也习惯在此发布相关代码。尝试使用['fadeTo（）']（http://api.jquery.com/fadeTo/）而不是'fadeIn（）'和'fadeOut（）'我对它有更好的运气。 FadeIn/Out与其他显示/隐藏方法一起使用时会出现奇怪的现象。 – Chad 2012-02-17 14:38:20

你应该发布相关的代码 – derekaug 2012-02-17 14:38:21

没有出于某种原因，你的fadeIn()是越来越适用于所有slideoverlays的但只适用于当前可见的。我会尽力让fadeIn()和fadeOut只影响你正在盘旋的实际一个。这样的事情：

$(function(){ 
    $('#slideshow .slide').hover(
     function(){ 
      var $this = $(this); 
      $this.find('.slideimage').fadeOut(100, function(){ 
       $this.find('.slideoverlay').fadeIn(100);            
      }); 
     }, 
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeOut(100, function(){ 
       $this.find('.slideimage').fadeIn(100);           
      }); 
     } 
    ); 
});

可能可以使用一些优化，但我认为这应该工作。虽然没有测试过，所以祝你好运。

试试这个摆脱白色闪光灯。基本上，这个想法是，如果你只是覆盖覆盖层，你不需要隐藏$('.slideimage')。所有你需要做的就是隐藏和显示滑动重叠。

$(function(){ 
    $('#slideshow .slide').hover(
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeIn(100);            
     }, 
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeOut(100); 
     } 
    ); 
});

来源

2012-02-17 14:55:20 derekaug

完美的工作，谢谢。有什么办法可以阻止转换过程中发生的白色“闪光”？ – 2012-02-17 14:58:04

请参阅编辑以摆脱“白色闪光灯”。让我知道它是如何工作:) – derekaug 2012-02-17 15:07:44

完美。谢谢！ – 2012-02-17 15:12:58

Jquery悬停功能不能按预期工作

回答

相关问题