Как переключить div для перемещения вверх и вниз

#jquery #html #css

#jquery — запрос #HTML #css #jquery

Вопрос:

Я пытаюсь скользящим образом переключить скрытый 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> div с идентификатором showText , он расширяется, сдвигаясь вниз, и отображает содержимое.

Прямо сейчас, когда я навожу курсор, ничего не происходит.

Как мне этого добиться?

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

Проблема, показанная здесь:http://youtu.be/68_kzCygYg4

1. Может быть, это потому, что вы скрываете div, который должен скользить?? $contentdiv.hide();

2. Я добавил JSFiddle с обновлением, но при наведении курсора мыши на home, а затем на List быстро DIV сходит с ума. Если вы наведете курсор мыши на home, а затем переместите курсор мыши в другое место, а затем вернетесь к списку, он будет работать нормально.

3. скрипка, похоже, работает для меня. при наведении курсора мыши на главную страницу, а затем на список текст в div слайдера изменяется. Ничего сумасшедшего…

4. Для меня Fiddle кажется нормальным поведением, используя Chrome v35 — наведение курсора мыши на Home, а затем быстрый переход к списку просто изменяет содержимое выдвинутого div.

5. Странно. При правильном стиле со мной этого не происходит. Я обновлю свой JSFiddle.

Ответ №1:

Нет никакой функции content.Text , использующей content.text

Это работает, смотрите:http://jsfiddle.net/x4My2/1 /

1. Жаль, что я не могу опубликовать видео о том, как это выглядит в моем браузере.

2. ладно, показывай. Я ошибся: нет причины, связанной с префиксом, есть неправильное название функции.

3. youtu.be/68_kzCygYg4 который показывает, что происходит в моем браузере для моего сайта.

4. какой браузер? Я использую Chrome, для меня это выглядит хорошо здесь: jsfiddle.net/x4My2/1

5. Используя chrome, а также IE и FF.