Question

I have a DIV which is a banner stretching 100% wide for the top 25px of the display. It fades into view on loading and can be removed by clicking the cross at the end and. It is set to slide out of view using JQuery. However, the contents don’t slide away with it, they just disappear. Do I need to attach the same jquery to the nested DIV as well to make sure they animate correctly?

Currently using this 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>

Here is the accompanying 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

There was small issues in CSS which you provided. I fixed them and test it in FireFox, IE, Chrome and Safari and it looks fine now:

• New Update: http://jsfiddle.net/42qWt/

I change your fixed size to be flexible depends on screen width and put your close div inside alert. I changed the order of close button div because I wanted to use float:right. Please let me know if you have any question regarding this 🙂