jquery .mouseover（）和.mouseout（）与淡入淡出

当用户将鼠标悬停在父div上时，我想用jquery淡入div。jquery .mouseover（）和.mouseout（）与淡入淡出

我有以下代码：

HTML：

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Explore D&amp;D Creative</title> 
     <link rel="stylesheet" href="media/css/explore.css" /> 
     <script type="text/javascript" src="media/js/jquery.min.js"></script> 
     <script type="text/javascript" src="media/js/jquery.custom.js"></script> 
    </head> 


    <body id="home"> 

     <!-- BEGIN CONTENT --> 
     <div id="content"> 

      <!-- BEGIN CONTENT TOP SLIDESHOW --> 
      <div id="top-slide"> 
       <div class="wrapper"> 

       </div> 
       <div id="select">...</div>   
      </div> 
      <!-- END CONTENT TOP SLIDESHOW --> 



      <!-- BEGIN CONTENT TWITTER --> 
      <div id="twitter-main"> 
       <div class="wrapper"> 
        <i class="icon-twitter"></i> 
        <span class="divider"></span> 
        <h2 class="feed">THIS IS SOME TWITTER TEXT</h2> 
        <p class="info">@DandDCreative - SOME TIME AGO</p> 
       </div>    
      </div> 
      <!-- END CONTENT TWIITER --> 


     </div> 
     <!-- END CONTENT --> 

    </body> 

</html>

CSS：

/*============================================ 
    CONTENT 
============================================*/ 
#content { 
    min-height:100%; 
    margin-top:55px; 
    padding-top:10px; 
} 
/*============================================ 
    HOME.PHP 
============================================*/ 
#home #content #top-slide { 
    background-color:#3D3B37; 
    height:300px; 
    position:relative; 
} 

#home #content #top-slide #select { 
    height:48px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    background:url(../img/home/bg-slie-select.png) repeat; 
    display:none; 
} 

#home #content #twitter-main { 
    background-color:#cccccc; 
    height:200px; 
    margin:10px 0; 
    padding-top:30px; 
    text-align:center; 
} 

#home #content #twitter-main i.icon-twitter { 
    background:url(../img/common/social/twitter.png) no-repeat center; 
    width:37px; 
    height:37px; 
    margin:0px auto 20px auto; 
    display:block; 
} 

#home #content #twitter-main span.divider { 
    border-top:1px solid #535353; 
    height:0; 
    width:100px; 
    display:block; 
    margin:0 auto; 
} 

#home #content #twitter-main h2.feed { 
    margin:40px 0; 
} 

#home #content #twitter-main p.info { 
    font-size:10px; 
    color:#666666; 
}

和JS：

$(document).ready(function() { 


    //HOME.PHP 

    $('#top-slide').mouseover(function() { 
     ('#select').fadeIn(600); 
    }); 

    $('#top-slide').mouseout(function() { 
     ('#select').fadeOut(600); 
    });   

});

该代码带来了以下错误鼠标和鼠标出respectivley：

Uncaught TypeError: Object #select has no method 'fadeIn'

Uncaught TypeError: Object #select has no method 'fadeOut'

我想这可能是是与鼠标悬停/鼠标移开的方法，但与点击的方法试了一下还，但它确实是相同的。

我可能做了一些愚蠢的事情，但我无法找到问题。

这里是大家的jsfiddle：http://jsfiddle.net/Ze28y/1/

来源

2012-11-30 David Passmore

您错过了$进入处理程序。

$('#top-slide').bind("mouseenter", function() 
{ 
    $('#select').stop(true).fadeIn(600); //$('#select'), not ('#select') 
}); 

$('#top-slide').bind("mouseleave", function() 
{ 
    $('#select').stop(true).fadeOut(600); //$('#select'), not ('#select') 
});

此外，你应该将衰，to prevent multiple fadein fadeouts to queue之前添加第一stop。并且，因为#select是#top-slide的子项，您应该使用事件mouseenter和mouseleave而不是mouseover和mouseout。（与this有关）

来源

2012-11-30 04:28:41

哇谢谢您必须阅读我的想法，因为我刚刚遇到了有关将鼠标移到#select元素中的问题:)现在修复了这个问题 –

哈哈！经典！ –

试试这个，你错过了$

$('#top-slide').mouseover(function() { 
     $('#select').fadeIn(600); 
    }); 

    $('#top-slide').mouseout(function() { 
     $('#select').fadeOut(600); 
    });

来源

2012-11-30 04:23:37

感谢告诉你这可能是愚蠢的！ –

@DavidPassmore非常欢迎 –

使用$

$('#top-slide').mouseover(function() { 
    $('#select').fadeIn(600); 
}); 

$('#top-slide').mouseout(function() { 
    $('#select').fadeOut(600); 
});

来源

2012-11-30 04:24:25 YogeshWaran

你忘了$声明一个jQuery对象

来源

2012-11-30 04:24:32

缺少$，你最好使用悬停。

$('#top-slide').hover(
    function() { $('#select').fadeIn(600); }, 
    function() { $('#select').fadeOut(600); } 
);

来源

2012-11-30 04:26:08 mattn

jquery .mouseover（）和.mouseout（）与淡入淡出

回答

相关问题