Содержание DIV не скользит должным образом

Question

У меня есть DIV, представляющий собой баннер шириной 100% для верхних 25 пикселей экрана.Он исчезает при загрузке и может быть удален нажатием на крестик в конце и.Это установлено, чтобы скользить вне поля зрения, используя JQuery.Тем не менее, содержимое не исчезает вместе с ним, оно просто исчезает.Нужно ли мне присоединять тот же jquery к вложенному DIV, чтобы убедиться, что они правильно анимируются?

В настоящее время используется этот JQuery:

<script type="text/javascript">
/* The fade in script */
$(document).ready(function(){
$('#alert_top').delay(2000).fadeIn(300);
});
/* The fade out script */
$(function(){ 
$(".alert_topClose").click(function(){
    $("#alert_top").slideUp(300, function(){
        $(this).remove();
    });
});
});
</script>

Вот соответствующий HTML

<div id="alert_top">
<div class="alertcontainer">
    <div class="alertcontent alertstyle">Text</div>
    <div class="alertclose alertstyle"><a class="alert_topClose"><img src="cancel_cross_14x14_white.png" /></a></div>
</div>
</div>

http://jsfiddle.net/2J7qP/

Answer 1

В CSS были небольшие проблемы, которые вы предоставили.Я исправил их и протестировал в FireFox, IE, Chrome и Safari, и теперь он выглядит нормально:

• Новое обновление: http://jsfiddle.net/42qWt/

Я изменяю ваш фиксированный размер набыть гибким, зависит от ширины экрана и поставить ваш близкий div внутри оповещения.Я изменил порядок div кнопки закрытия, потому что я хотел использовать float: right.Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы относительно этого: -)