SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliding jQuery image with html and css.

    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.


    Code:
    <!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. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this instead:
    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •