slide div on image

Question

I have very simple div(1). I need other simple div(2) slide slowly on it(1) at once page loads. From bottom to top.

<div id="slideshow" class="reb_darkblue_bg">
<img alt="Slideshow" src="images/slideshow_home_1.jpg"/>
</div>

<div class="slidingdiv" style="background:black; color:white;">Pricing</div>

At internet examples too confusing. My english not best, sory for language.

Answer 1

I think what you're trying to do is an animated 'sliding effect.' Take a look at the jQuery library and also look at the toggle effect: http://docs.jquery.com/Effects/toggle

Answer 2

If you want the inner-div to slide up from the bottom, you'll want to position it absolutely to the parent container, like this:

.container {position:relative; height:50px; width:640px; border:1px solid #333;}
.childSlider {position:absolute; bottom:0; left:0; width:640px; display:none;}

<div class="container">
  <div class="childSlider"><img src="file.jpg" /></div>
</div>

$(function(){
  $(".childSlider").slideDown();
  $(".container").click(function(){
    $(this).find(".childSlider").slideToggle();
  });
});

Answer 3

position slidingdiv absolutely and use this code:

<script type="text/javascript">
$(document).ready(function(){
    var p=$("#slideshow").offset();
    $("#slidingdiv").css(p);
    $("#slidingdiv").show('slide',{direction:'down'},5000);
});
</script>