Как я могу добавить div с JQuery?

Question

У меня есть div, определенный как следующий в моем файле CSS:

    #toolbar
    {
        position:relative;
        top: 0;
        height: 50px;
        background-color: #F4A83D;
        width: 100%;
        text-align: center;
        display: hidden;
    }

Тогда в моем HTML-файле:

 <div id="toolbar">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

и, наконец, у меня есть следующий скрипт в верхней части моей html-страницы, который, как я полагал, затухает в моем div при загрузке страницы:

   <script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            $("#toolbar").fadeIn("slow");
        });
    </script>

Что я делаю не так? Это немедленно обнаруживается, как будто это не исчезало вообще. Я неправильно обращаюсь к своему div в скрипте jquery?

---

Исходя из некоторых ответов, я изменил свой div на:

<div id="toolbar" style="visibility: hidden">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

С тем же вызовом скрипта, и теперь мой div начинается скрытно и никогда не появляется. Что еще я делаю не так?

Answer 1

См .: http://www.w3schools.com/css/pr_class_display.asp

hidden не является допустимым значением для свойства display. Вы должны использовать дисплей: нет;

Вот почему вы видите это мгновенно, оно никогда не было скрыто, потому что браузер не знает, что делать с дисплеем: скрытый; декларация.

Вы, вероятно, хотите видеть: скрытый; свойство, потому что в этом случае панель инструментов будет невидимой, но визуализированной, поэтому она займет свое место в документе. Который будет гарантировать, что вся ваша страница не будет перемещаться, когда вы ее добавляете.

Answer 2

$("button").click(function() { 
  $(".element")
  .css({ opacity:0, visibility:"visible" })
  .animate({ opacity:1 }, "slow");
});

Answer 3

Сначала нужно спрятать div.

$('#toolbar').hide().fadeIn('slow');

или что-то подобное, поэтому панель инструментов не будет видна во время загрузки страницы:

<div id="toolbar" style="visibility: hidden">...</div>

$('#toolbar')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;

Answer 4

Одна вещь, которую я заметил, это ваш сценарий.

<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></

должно быть

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript">

также

display: hidden;

недействительно должно быть

Visibility: hidden;

чтобы скрыть элемент

Answer 5

$("#toolbar").css("display","none"); 

$("#toolbar").css("display","block").fadeIn('slow'); 

или вы можете использовать функцию анимации. Анимация в JQuery

Answer 6

или display: none; для сокрытия элемента.

и для показа:

display: block;

и получение состояния элемента:

var state = $("#ex").css("display"); 

if(state == "none")
{
...
}
else
...