ユーザーが親divにカーソルを合わせたときに、jqueryでdivをフェードインしたいと思います。
私は次のコードを持っています:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Explore D&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);
});
});
このコードは、マウスインおよびマウスアウトに関して次のエラーを発生させます。
Uncaught TypeError: Object #select has no method 'fadeIn'
Uncaught TypeError: Object #select has no method 'fadeOut'
mouseover / mouseoutメソッドと関係があるのではないかと思いましたが、clickメソッドでも試してみましたが、同じです。
私はおそらく何かばかげたことをしましたが、問題を見つけることができません。
これが皆のためのJSFIDDLEです:http://jsfiddle.net/Ze28y/1/