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

У меня есть div с идентификатором «контент». Это видно.

<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

обновить

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

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

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

обновить

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


jquery effects fading
person Max Frai    schedule 04.10.2009    source источник
comment
Есть ли шанс, что вы могли бы опубликовать больше кода или ссылку на демонстрацию?   -  person Levi    schedule 04.10.2009
comment
Вероятно, это не проблема, но вы написали контент и контент: P Можете ли вы поделиться своим кодом CSS для содержимого div#?   -  person Alessandra Pereyra    schedule 04.10.2009
comment
можете ли вы указать дополнительную информацию, такую ​​как стиль css, если он применяется к этому элементу, и используемую вами версию браузера, а также используете ли вы стили jqueryui css на этой странице.   -  person eulerfx    schedule 04.10.2009
comment
Есть ли шанс, что вы наблюдаете это в IE?   -  person karim79    schedule 04.10.2009
comment
Я обновил пост. Извините, но я не могу сделать демо.   -  person Max Frai    schedule 04.10.2009

Ответы (4)


arrow_upward
1
arrow_downward

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

Обе проблемы, вероятно, вызваны тем, что ваш скрипт выполняется до того, как в документе появились разделы оболочки и содержимого. Если ваш тег <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>
person Dominic Cooney    schedule 04.10.2009
comment
Я решил свою проблему. Я не могу скопировать весь код, потому что он слишком большой и имеет свои собственные зависимости. Но я сделаю ваш пост как ответ на мой вопрос. Спасибо. - person Max Frai; 04.10.2009

arrow_upward
1
arrow_downward

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

person DGM    schedule 04.10.2009

arrow_upward
0
arrow_downward

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

person WDuffy    schedule 04.10.2009
comment
Извините, это была моя типографская ошибка. - person Max Frai; 04.10.2009
comment
Конечно, я настроил тест с предоставленным вами кодом (копирование/вставка), и он отлично работал в Windows XP Firefox 3.5 и IE 8, если это кому-то помогло. - person WDuffy; 04.10.2009

arrow_upward
0
arrow_downward

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

person David    schedule 04.10.2009