ttmt ttmt - 6 months ago 9
jQuery Question

Sliding jQuery image with html and css

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, can 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>

Answer

You shouldn't be changing/animating the top, you should be changing/animating the margin-top of the #boxwrap div

I've modified your code below (check the $('#box2').hover part):

 <!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;
          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({"margin-top":"-215px"},{queue:false, duration:280});
        },function(){
          $('#boxWrap' ,this).stop().animate({"margin-top":"0px"},{queue:false, duration:260});
        })
      </script>

    </body>

    </html>