带有淡入淡出的jquery .mouseover()和.mouseout() [英] jquery .mouseover() and .mouseout() with fade
问题描述
当用户将鼠标悬停在父div上时，我想用jquery淡入div.
I want to fade a div in with jquery when the user hovers over a parent 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);
});
});
此代码在鼠标移入和鼠标移出方面出现以下错误:
This code brings up the following errors on mouse in and mouse out respectivley :
Uncaught TypeError: Object #select has no method 'fadeIn'
Uncaught TypeError: Object #select has no method 'fadeOut'
我认为这可能与mouseover/mouseout方法有关，但也可以通过click方法进行尝试，但效果相同.
I thought it might be something to do with the mouseover / mouseout methods but tried it with click method also but it does the same.
我可能做了一些愚蠢的事情，但是我找不到问题.
I have probably done something silly but i cant find the issue.
这里是每个人的JSFIDDLE: http://jsfiddle.net/Ze28y/1/
Here is a JSFIDDLE for everyone: http://jsfiddle.net/Ze28y/1/
推荐答案
您错过了$到处理程序中.
You missed the $ into the handlers.
$('#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')
});
此外，您应该在渐变之前首先添加stop，以防止多个渐变淡入队列.并且，由于#select是#top-slide的子级，因此应使用事件mouseenter和mouseleave而不是mouseover和mouseout. (与此相关)
Also, you should add a stop first before your fades, to prevent multiple fadein fadeouts to queue. And, because #select is a child of #top-slide, you should use the events mouseenter and mouseleave instead of mouseover and mouseout. (related to this)
这篇关于带有淡入淡出的jquery .mouseover()和.mouseout()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
