JQuery - div fading проблема

У меня есть div, у которого есть id 'content'. Это видно.JQuery - div fading проблема

<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%; 
}

Browser: Firefox 3.5.3 под Linux Gentoo

обн

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

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

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

обн

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

источник

2009-10-04 Ockonal

Есть ли вероятность, что вы сможете разместить больше кода или ссылку на демо? – Levi

Вероятно, это не проблема, но вы написали «контент» и «конус»: P Можете ли вы поделиться своим кодом CSS для содержимого div #? – Yaraher

вы можете указать дополнительную информацию, такую как стиль css, если таковой имеется, применительно к этому элементу и используемой вами версии браузера, и используете ли вы стили jqueryui css на этой странице. – eulerfx

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

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

источник

2009-10-04 18:02:04

Я решил свою проблему. Я не могу скопировать весь код, потому что он слишком большой и имеет собственные зависимости. Но я сделаю свой пост ответом на мой вопрос. Благодарю. – Ockonal

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

источник

2009-10-04 17:18:01 WDuffy

Извините, это был мой тип-ошибка. – Ockonal

Ockonal, я настраиваю тест с кодом, который вы поставили (копируете/вставляете), и он отлично работает в Windows XP Firefox 3.5 и IE 8, если это помогает. – WDuffy

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

источник

2009-10-04 17:42:05 David

Да, я не могу опубликовать весь код, потому что он слишком большой. Благодарю. – Ockonal

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

источник

2009-10-04 18:56:37 DGM

JQuery - div fading проблема

ответ

Смежные вопросы