Div Background image animate /w description text

by wutyeetun87

HTML

<div id="main">

    <p>Header</p>
    <p>Menu</p>
    <div id="wrap">
        <div id="desc"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
        <div id="img1" class="animate_img"></div>
        <div id="img2" class="animate_img"></div>
    </div>
    
</div>

CSS

body, html {
    margin:0;
    padding:0;
}

#main {
    width:90%;
    margin:0 auto;
    background:#dfdfdf;
    height:600px;
}

#wrap {
    position:relative;
    width:100%;
}
.animate_img {
    position:absolute;
    top:0;
    display:none;
    width:100%;
    height:300px;
    overflow:hidden;
}
#img1 {
    background:url('http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg');
}
#img2 {
    background:url('http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg');
}

#wrap #desc {
    position:absolute;
    z-index:10;
    right:0;
    top:0;    
    width:0;
    height:100px;
    background:url('https://css-tricks.com/wp-content/csstricks-uploads/transpBlack25.png');
    color:#fff;
    font:16px Arial bold;
    text-transform:uppercase;
}

#wrap #desc p{
    float:left;
    margin:0;
    padding:10px;
    width:300px;
    height:80px;
}

JavaScript

$(document).ready(function () {
    $('.animate_img').hide();
    $('.animate_img').eq(0).show();

    $("#wrap #desc").animate({
        width: "300"
    }, 600, function () {
        // Animation complete.
        anim();
    });
});

function anim() {
    $("#wrap .animate_img").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap .animate_img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}