【发布时间】：2012-11-27 14:47:42
【问题描述】：
我目前正在开发一个页面顶部有一个主广告牌的网站。在那个广告牌上，右边有 6 个缩略图，用于切换广告牌中显示的 div。它看起来像这样：
当您将鼠标悬停在缩略图上时，它们会向左延伸以显示如下文本：
我遇到的问题是：如果用户在 .hover mouse-in 处理程序的 .switchClass 动画完成之前将鼠标移出 div，那么 mouse-out 处理程序中的 .switchClass 事件也会触发过早或根本没有，导致即使在用户将鼠标移出后仍保留悬停效果。基本上让缩略图像上图一样“打开”。
有没有办法在用户鼠标移出时中断鼠标移入 .switchClass 动画？
我的代码如下：
HTML：
<div id="bbTab1" class ="inactive" style="margin-top:30px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab1.png" />
<div class="leftBorder"></div>
</div><!--bbTab1-->
<div id="bbTab2" class ="inactive" style="margin-top:95px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab2.png" />
<div class="leftBorder"></div>
</div><!--bbTab2-->
<div id="bbTab3" class ="inactive" style="margin-top:160px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab3.png" />
<div class="leftBorder"></div>
</div><!--bbTab3-->
<div id="bbTab4" class ="inactive" style="margin-top:225px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab4.png" />
<div class="leftBorder"></div>
</div><!--bbTab4-->
<div id="bbTab5" class ="inactive" style="margin-top:290px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab5.png" />
<span class="bText"> This is some text </span>
<div class="leftBorder"></div>
</div><!--bbTab5-->
<div id="bbTab6" class="inactive" style="margin-top:355px">
<div class="rightBorder"></div>
<img class="tabImage" src="images/bbtab6.png" />
<div class="leftBorder"></div>
</div><!--bbTab6-->
CSS：
#billboard .inactive{
width:53px;
height:57px;
border-bottom: 1px solid #ACACAC;
border-top: 1px solid #ACACAC;
background-color:#FFFFFF;
position:absolute;
z-index:5000;
right:0;
}
#billboard .inactiveHover{
width:180px; /*61px*/
height:57px;
background-color: white;
border-bottom: 1px solid #FF9B15;
border-top: 1px solid #FF9B15;
z-index:5000;
position:absolute;
right:0;
}
#billboard .active{
width:61px; /*61px*/
height:57px;
background-color: white;
border-bottom: 1px solid #FF9B15;
border-top: 1px solid #FF9B15;
z-index:5000;
position:absolute;
right:0;
}
JS：使用 Jquery 1.8.2 和 Jquery UI 1.9.1
$(function() {
$(".inactive").hover(
function () {
if ($(this).hasClass("active")){return;}
else{$(this).switchClass("inactive", "inactiveHover", 300, "easeOutQuint");}
},
function () {
if($(this).hasClass("active")){
$(this).removeClass("inactive").removeClass("inactiveHover");
}
else{$(this).switchClass("inactiveHover", "inactive", 300, "easeOutQuint");}
});
});
【问题讨论】：
-
如果你删除
if($(this).hasClass("inactiveHover")){不会修复它吗？ -
我想了想，把它拆下来看看效果，但无济于事。该行存在的原因是，如果您实际单击缩略图，则该类将变为“活动”，并且“活动”类没有悬停效果。我将帖子中的功能编辑为最新和最好的功能，但仍然遇到同样的问题。
-
CSS 过渡是否适合您？您必须支持哪些浏览器？这是您想要产生的那种效果（但在 JavaScript 中）？ jsfiddle.net/mhNzH
-
使用你的新代码，我似乎无法让 div 停留在悬停位置，所以这似乎是固定的。您不喜欢当前代码的哪些方面？
-
@Greg CSS 过渡效果非常好。不过我还有一个问题。缩略图内的文本笨拙地动画到位。 （它会在缩略图下滑动并在有足够空间时拉到位）无论如何要解决这个问题？要么在扩展完成时显示文本，要么在 div 向左扩展时几乎“出现”文本？
标签： javascript jquery html css jquery-ui