Question

我正在建立一个图片库。图像容器有一个相对位于图像底部的段落，此段落包含一个链接。默认情况下，段落显示设置为无。

我希望段落在图像悬停时淡入但在图像，段落和链接上发生悬停事件时不会触发多个淡入淡出。到目前为止，当鼠标进入隐藏段落时，我设法防止双击，但当鼠标进入锚标签时jQuery进入疯狂循环，我无法以任何方式阻止它。

这是我的代码：

imgHover: function() {
   var bigImage = this.imageContainer.find('img');
   var imgInscription = $(bigImage).siblings('p');
   $(bigImage)
   .mouseenter(function(event) {
         event.stopPropagation();
         $( imgInscription ).stop().fadeIn(500)})
  .mouseleave(function() {    
         $( imgInscription ).stop().fadeOut(500);});}}

这是相关的HTML：

<div id="pic-container">
   <img src="images/gallery/taureau_peace_large.jpg"  alt="Peaceful Lake View" />
   <p><a href='#' title='Read about adventure details'>Read about adventure >>> </a></p>
</div>

以及一些CSS以防万一：

 #pic-container p {
 position:relative;
 top:-55px;
 display:none;}

任何帮助将不胜感激：）

编辑：到目前为止，我想出的唯一解决方案是分别将淡入淡出图像和段落。不是最好的解决方案，但有效，所以我坚持下去，直到找到更好的东西。

var imgInscription = $('#pic-container p');

$('#pic-container img').hover(function(event) {
    event.stopImmediatePropagation();
    $(imgInscription).stop().fadeIn(500);
}, 
function() {
    $(imgInscription).stop().fadeOut(500);
});

$(imgInscription).hover(function(event) {
     event.stopImmediatePropagation();
     $(this).stop().fadeIn();
}, 
function() {
    $(this).stop().fadeOut(500);
});

Answer 1

.mouseenter(function(event) {
     event.stopPropagation();
     $( imgInscription ).stop(true).fadeIn(500)})
  .mouseleave(function() {    
         $( imgInscription ).stop(true).fadeOut(500);});}}

试试这个，我在.stop

中添加了“true”

Answer 2

尝试在存储段落状态的构造函数中设置var。例如：

this.pIsActive = false;

然后在您的mouseenter和mouseleave事件中，当this.pIsActive为false或true（分别）时，您可以检查仅使用fadeIn和fadeOut。 fadeIn和fadeOut的回调（当淡出完成时）会改变this.pIsActive。例如

imgHover: function() {
    var bigImage = this.imageContainer.find('img');
    var imgInscription = $(bigImage).siblings('p');
    $(bigImage)
    .mouseenter(function(event) {
         if (!this.pIsActive) {
             $( imgInscription ).stop().fadeIn(500, function() {
                 this.pIsActive = true;
             });
         }
     })
    .mouseleave(function() {    
    $( imgInscription ).stop().fadeOut(500);
        if (this.pIsActive) {
             $( imgInscription ).stop().fadeOut(500, function() {
                 this.pIsActive = false;
             });
         }
    });}}

当悬停在锚标记上时，fadeIn / fadeOut效果会保持循环 - jQuery

2 个答案: