jQuery悬停 - 我的'mouseout'脚本有什么问题？

我正在尝试为页面上的大量图片进行相当简单的导航。当图像为'鼠标悬停'时，我希望图像本身变灰，并且面板从右侧滑入并添加一些其他细节。jQuery悬停 - 我的'mouseout'脚本有什么问题？

这是我设法做的以下jQuery。

现在，我想要的是，当鼠标离开图像时，使用滑动的面板幻灯片清晰地显示图像。

奇怪的是，我试图使用的jQuery（如fadeOut）都没有工作。这里是我的脚本：

HTML

<div id="home_1" class="home_but"> 
    <div class="home_overlay"></div> 
     <img src="images/home_pic_1.jpg" alt="" width="180" height="188" /> 
    <div class="home_sub">here is some slide in text</div> 
    </div>

CSS

#home_1 {position:absolute; overflow:hidden; top:82px;} 


    .home_overlay {position:absolute; background:#fff; display:none;} 
    .home_sub { 
    width:150px; 
    height:50px; 
    background:blue; 
    position:absolute; 
    left: -1000px; 
    top: 70px; 
}

的JavaScript

<script type="text/javascript"> 
$(document).ready(function() { 


    $(".home_1").hover(
     function() { 
    var img = $(this).children('img'); 
     $(".home_overlay",this).height(img.height()); 
     $(".home_overlay",this).width(img.width()); 
     $(".home_overlay",this).fadeTo('slow', 0.5); 
     $(".home_sub",this).css('left',img.width()); 
     $(".home_sub",this).css('top',(img.height()/2)-25); 
     varNewPos = img.width() - 150 +"px" 
     //alert(varNewPos); 
     $(".home_sub",this).animate({left:varNewPos}); 
     }, 
     function() { 
$(".home_overlay",this).fadeOut(fast); 
       } 
    ); 

}); 
</script>

鼠标over bit工作正常，但在mouseout上没有任何反应。然后我发现使用

$(".home_overlay",this).css('display','none');

工作。所以改变了其他css属性，但fadeOut和其他jquery动画未能触发。

我在做什么错？

欢呼

狗

来源

2011-09-01 Dog

欢迎登上stackoverflow.com派对船！ –

非常感谢:) – Dog

品牌：

$(".home_overlay",this).fadeOut(fast);

是

$(".home_overlay",this).fadeOut('fast');

编辑：只注意到$(".home_1")应该$("#home_1")也

来源

2011-09-01 12:12:21

好吧，你去...这是我的一个愚蠢的错字...因为它在'快'位失败，那么它不执行下面的jquery，它滑出覆盖... 非常感谢你的指针:) – Dog

@Dog，网站提示：点击答案旁边的复选标记，以便当你对答案满意时回答问题 - 将会显示一个绿色的选中标记:) –

谢谢，明白了......我是点击“向上”箭头，而是... – Dog

jQuery悬停 - 我的'mouseout'脚本有什么问题？

回答

相关问题