jquery淡入/淡出悬停问题 - 停止闪烁！

我正在使用此脚本在图标上淡入淡出。jquery淡入/淡出悬停问题 - 停止闪烁！

我也想隐藏以前的形象，一旦顶部图像完成衰落。

我遇到的问题是，当你将鼠标悬停在它似乎闪烁在消失之前。我需要闪烁停止！

以下是我的HTML和jQuery代码。我试图让这个代码有点普遍。

.link-container { 
    position: relative; 
    cursor: pointer; 
    float: left; 
} 
.title-hover { 
    background-position: 0 -106px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
    display: none; 
    z-index: 2; 

} 
.title { 
    background-position: 0 -63px; 
    width: 320px; 
    height: 33px; 
    margin: -32px 0 0 56px; 
} 

<div class="link-container"> 
    <div class="main-tile hover-init title"></div> 
    <div class="main-tile title-hover"></div> 
</div> 

$(function() { 
    $(".link-container").hover(function() { 
     $(".hover-init", this).next().stop(true, true).fadeIn(400); 
     $(".hover-init", this).hide(); 
    }, function() { 
     $(".hover-init", this).next().stop(true, true).fadeOut(400); 
     $(".hover-init", this).show(); 
    }); 
});

来源

2011-07-25 William George

你没有发布HTML，只是CSS。 –

这里的jquery老是最新版本以及html。 Id喜欢淡化.next，然后隐藏hover-init。然后到相反的淡出。您建议的方法有效，但它并不隐藏悬停init，它只是将另一个.next淡出，这看起来不太好=/ –

您正在回答我的回答吗？ – Cystack

的问题是，悬停交换机从一个DIV到另一个标题弹出。
所以，你需要嗅探你是什么样的div，并改变反应。，做你问

代码如下所示：

$(".link-container div.main-tile").hover (fancyRollover); 

function fancyRollover (zEvent) { 
    var jThis   = $(this); 
    var bInInitDiv  = jThis.hasClass ('hover-init'); 
    if (bInInitDiv) { 
     var initDiv  = jThis; 
     var hoverDiv = jThis.next(); 
    } 
    else { 
     var initDiv  = jThis.prev(); 
     var hoverDiv = jThis; 
    } 

    if (zEvent.type == 'mouseenter') { 
     if (bInInitDiv) { 
      hoverDiv.stop (true, true).fadeIn (400, function() { 
       initDiv.hide(); 
      }); 
     } 
     else { 
      //--- Do nothing. 
     } 
    } 
    else { //-- zEvent.type == 'mouseleave' 
     if (bInInitDiv) { 
      //--- Do nothing. 
     } 
     else { 
      hoverDiv.stop (true, true).fadeOut (400); 
      initDiv.show(); 
     } 
    } 
}

See it in action at jsFiddle.

来源

2011-07-26 00:47:20

Brock im不太高级的Jquery所以请原谅我的困惑。我拿了你的一段代码，并试图将其应用到我的html，但它似乎没有做任何事情...任何建议，为什么这可能是？ –

你的代码与问题中的代码和小提琴中的代码有什么不同？（小提示与问题相同，除了小CSS调整来显示操作。）这个答案jQuery应该直接进入页面，如问题中所述。你能链接到实际的页面吗？ –

我设法解决它，所以你的代码工作，但现在我遇到了一个新问题，看看这个评论结束时的链接，并将鼠标悬停在“简历”链接上。图标和文本应该一起淡入淡出，使用你的代码，它们似乎被分开处理。即使是名称上的悬停似乎也不平坦[LINK HERE]（http://www.norkenguitars.com/new） –

想要在淡入淡出完成后开始淡出，对不对？然后使它的淡入功能的回调：

$(".hover-init", this).next().stop(true, true).fadeIn(400, function() { 
    $(".hover-init", this).fadeOut(); 
});

编辑：

现在我看你想实现我甚至不知道你为什么要淡出的第一个div效果

。

http://jsfiddle.net/ARyjq/3/做

来源

2011-07-25 22:28:19 Cystack

所以fadeOut失败？尝试symply'$（this）.fadeOut（）'而不是'$（“.hover-init”，this）.fadeOut（）' – Cystack

它是否在显示fadeout失败时显示错误？ – Cystack

与您的方法，它不会给出一个错误只是淡化一个图像在另一个之上。用我在我的文章中的方法，它似乎隐藏图像然后淡入，导致眨眼。我正在寻找一种淡入淡出一种形象的方式，然后隐藏另一种方式，没有眨眼。所以没有任何方法 –

jquery淡入/淡出悬停问题 - 停止闪烁！

回答

相关问题