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

StackOverflow https://stackoverflow.com/questions/1516904

  •  19-09-2019
  •  | 
  •  

Вопрос

У меня есть div с идентификатором «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

обновление

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

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

Он скрывается правильно.

обновление

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

Это было полезно?

Решение

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

Обе проблемы, вероятно, вызваны тем, что ваш скрипт выполняется до того, как в документе появились обертка и элементы содержимого.Если ваш <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>

Другие советы

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

Вы написали $ ('#Content') в Fadeout и $ ('#Conent') в Fadein. Другое, что эти эффекты называются точно так же, и не дают объяснения, почему они не будут работать, как ожидалось.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top