Question

我正在尝试为页面上的许多图片进行相当简单的导航。当图像为“鼠标悬停”时，我希望图像本身为“灰色”，并让面板从右侧滑入，并附带一些其他细节。

我设法使用以下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>

鼠标悬停位工作正常但鼠标输出没有任何反应。然后我发现使用

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

的工作。所以改变任何其他css propoerties，但fadeOut和其他jquery动画未能触发。

我做错了什么？

欢呼声

狗

Answer 1

请：

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

是

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

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

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

1 个答案: