Sliding jQuery image with html and css

HTML & CSS
1

Hi all

I have a demo here to illustrate my problem.

http://www.ttmt.org.uk

The red block on the left is an image that slides up and down with jQuery when you hover over it.

I would like to do this but without the image on the right block.

The right block is two div’s in a containing div. My problem is I can’t get it to work, cam any see where I’m
going wrong.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">

    #wrap{
    	margin:50px
    }
    #box{
    	height:215px;
    	width:330px;
    	float:left;
    	position:relative;
      overflow:hidden;
     	margin:0 15px 15px 0;
    }
    #box img{
    	position:absolute;
    }

    #box2{
      width:330px;
      height:215px;
      position:relative;
      1top:300px;
      overflow:hidden;
    }
    #box2 .con{
      width:330px;
      height:215px;
    }
    #box2 #top{
      background:red;
    }
    #box2 #bottom{
      background:#eee;
    }
  </style>

  </head>

<body>

  <div id="wrap">

  	<div id="box">
      <a href=""><img src="box.png" alt="" /></a>
    </div>

    <div id="box2">

      <div id="boxWrap">
        <div id="top"  class="con">
        </div>

        <div id="bottom" class="con">
        </div>
      </div>
    </div><!--boxWrap-->

	</div><!--wrap-->


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script src="jquery.easing.1.3.js" type="text/javascript"></script>

  <script>
    $('#box a').hover(function(){
      $("img", this).stop().animate({top:"-215px"},{queue:false, duration:280});
    },function(){
      $("img", this).stop().animate({top:"0px"},{queue:false, duration:260});
    })
    //
    $('#box2').hover(function(){
      $('#boxWrap' ,this).stop().animate({top:"-215px"},{queue:false, duration:280});
    },function(){
      $('#boxWrap' ,this).stop().animate({top:"0px"},{queue:false, duration:260});
    })
  </script>

</body>

</html>
2

Try this instead:

<div id="box2">
  <div id="boxInner">
  </div>
</div>

Then, make #boxInner’s background color red and just animate its height attribute.
BTW, this can all be done in CSS with transitions. If you’re interested, I can show you how.