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

I want to fade a div in with jquery when the user hovers over a parent div.

当用户将鼠标悬停在父div上时，我想用jquery淡化div。

I have the following code:

我有以下代码：

HTML:

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:

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;
}

and JS:

和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'

未捕获的TypeError：对象#select没有方法'fadeIn'

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

未捕获的TypeError：对象#select没有方法'fadeOut'

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.

我认为它可能与mouseover / mouseout方法有关，但也尝试使用click方法，但它也是如此。

I have probably done something silly but i cant find the issue.

我可能做了些傻事但我找不到问题。

Here is a JSFIDDLE for everyone: http://jsfiddle.net/Ze28y/1/

这是每个人的JSFIDDLE：http：//jsfiddle.net/Ze28y/1/

5 个解决方案

#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')
});

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)

此外，您应该在渐变之前添加一个停止，以防止多个fadein fadeouts排队。并且，因为#select是#top-slide的子项，所以您应该使用事件mouseenter和mouseleave而不是mouseover和mouseout。（与此相关）

#2

use $

用$

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

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

#3

You forgot the $ to declare a jquery object

你忘了$来声明一个jquery对象

#4

try this, you missed $

试试这个，你错过了$

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

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

#5

Missing $ and you've better to use hover.

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

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

#1