JQuery - проблема исчезновения div - PullRequest
Новая
       34

JQuery - проблема исчезновения div

0 голосов
/ 04 октября 2009

У меня есть div, у которого есть id 'content'. Это видно 

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

Теперь я хочу, чтобы это исчезло: 

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

И ничего не происходит. Но когда я написал: 

$('#content').fadeIn( 1500 );

Он прячется, а затем снова показывает.

Вот CSS 

#content
{
    height: 100%;
    width: 100%;
}

Браузер: Firefox 3.5.3 под Linux Gentoo

UPD

Когда я набираю код: 

$('#content').hide();

Правильно прячется.

UPD

Я решил проблему ... Не могу понять, почему это произошло ... Просто заменил jquery.min на jquery

Ответы [ 4 ]

1 голос
/ 04 октября 2009

У меня работает, Firefox на OSX. Убедитесь, что ваши идентификаторы уникальны, если у вас есть дубликат, он может работать неправильно. Кроме того, ваш стиль: блок избыточен, div - это блоки по умолчанию.

1 голос
/ 04 октября 2009

Если я понимаю ваш вопрос, у вас есть две проблемы: контент не исчезает, и когда вы щелкаете по нему, контент не исчезает.

Обе проблемы, вероятно, вызваны тем, что ваш скрипт выполняется до того, как в документе появились оболочки и div содержимого. Если ваш тег <script> находится в <head> вашего документа, то $('#wrapper') не найдет ничего, что может исчезнуть, и $('#content') не найдет ничего, к которому можно прикрепить обработчик щелчка.

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

$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
    $(this).fadeOut(1500);
  });
});

В качестве альтернативы вы можете поместить тег <script> после тега <div> в теле.

Когда вы исправите эту проблему, содержимое будет исчезать, но не будет гладким, потому что div обертки изначально виден - у вас есть style="display:block" в div обертки. Вместо этого вам нужно сделать это display: none;, чтобы div оболочки был скрыт во время загрузки страницы.

Вот полный файл, который работает: 

<html>
<head>
<style type="text/css">
#wrapper
{
    display: none;
}

#content
{
    height: 100%;
    width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  window.alert("Couldn't load jQuery");
</script>
<script>
$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
     $(this).fadeOut(1500);
  });
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Some text
  </div>
</div>
</body>
</html>
0 голосов
/ 04 октября 2009

Вы также оставляете # в "#wrapper" (строка 1 jQuery).

0 голосов
/ 04 октября 2009

Вы написали $ ('# content') в fadeOut и $ ('# conent') в fadeIn. Кроме того, эти эффекты называются точно так же и не дают объяснения, почему они не будут работать так, как ожидалось.

...