jquery - 如何切换一个div上下滑动

Question

当用户将鼠标悬停在某些链接按钮上时，我试图滑动切换隐藏的 DIV。

JavaScript:

$(function () { // DOM ready shorthand

            var $content = $(".sliderText");
            var $contentdiv = $(".sliderContent");

            var $homeToggle = $("#home");
            var $listToggle = $("#list");

            $contentdiv.hide();

            $homeToggle.hover(function () {
                $content.Text("Navigate to Home");
                $contentdiv.stop().slideToggle();
            });
            $listToggle.hover(function () {
                $content.Text("SDSFDFS");
                $contentdiv.stop().slideToggle();
            });
        });

CSS:

    .sliderContent {
        margin: 0 auto;
        text-align: center;
        border: 2px dotted #00039a;
        padding: 5px;
    }

HTML:

<div>
                <div class="container" id="homeDIV" runat="server" clientidmode="Static">
                    <a id="home" title="Navigate to home page" href="Default.aspx">Home</a>
                </div>
                <div class="container" id="listDIV" runat="server" clientidmode="Static">
                    <a id="list" title="Shows all the fields and their indexes per PDF form in the folder" href="ListFormFields.aspx">List PDF Form Fields</a>
                </div>
                <div class="container" id="createDIV" runat="server" clientidmode="Static">
                    <a id="create" title="Allows user to enter the data in HTML/ASP.NET controls to be populated in PDF forms" href="CreateW9.aspx">Create PDF From Fill-In</a>
                </div>
                <div class="container" id="queryDIV" runat="server" clientidmode="Static">
                    <a id="query" title="Auto-generates the PDF based on a search by the user" href="PDFQueryCreate.aspx">Create PDF Quering a DataBase</a>
                </div>
                <div class="container" id="displayDIV" runat="server" clientidmode="Static">
                    <a id="display" title="" href="PDFAllFilesDisplay.aspx">Display All Completed PDF Files</a>
                </div>
                <div class="container" id="emailDIV" runat="server" clientidmode="Static">
                    <a title="Contact the developer for support" href="mailto:zh@as.com">Email Support</a>
                </div>
                <div id="showText" class="sliderContent" runat="server" clientidmode="Static">
                    <span class="sliderText"></span>
                </div>
            </div>

我想要实现的是当用户将鼠标悬停在任何 <a> 上时ID 为 showText 的 div将通过向下滑动展开并显示内容。

现在，当我将鼠标悬停在上面时，没有任何反应。

如何实现？

JSFiddle:http://jsfiddle.net/mt4m2/

此处显示的问题:http://youtu.be/68_kzCygYg4

Answer 1

没有函数content.Text，使用content.text

有效，看:http://jsfiddle.net/x4My2/1/