Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Animate block a-tag on hover

    Hey everyone,

    I have a series of a-tags containing hrefs which are displayed as block-inlines. I'v currently got them set to change height hover just with CSS but I'd really like this to be animated.

    I've played around with a couple of tutorials i've found online but I just cant get anything to work.

    I have a div called "nav-holder" which contains 4 similar to the following:

    Code:
    <a class="link_home" href="index.php" /></a>
    I need to animate link_home to change from 50px heigh to 120px heigh onMouseOver, then back again onMouseOut.

    Could anyone advise how to do this?

    Thanks

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there YourDirector,

    Here is an example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>css transition</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
        font-family:verdana,sans-serif;
        font-size:1em;
     }
    #nav {
        width:396px;
        padding:0;
        margin:0 auto;
        list-style-type:none;
     }
    #nav li {
        float:left;
        margin:0 4px;
     }
    #nav a {
        display:block;
        line-height:50px;
        padding:0 10px;
        border:1px solid #963;
        background-color:#fed;
        color:#666;
        box-shadow:0 0 0 #f0f0f0;
        -webkit-transition:all 2s ease;
        -moz-transition:all 2s ease;
        transition:all 2s ease;
     }
    #nav a:hover {
        line-height:120px;
        border-color:#630;
        background-color:#f93;
        color:#000;
        box-shadow:4px 4px 4px #666;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="nav">
     <li><a href="#">link one</a></li>
     <li><a href="#">link two</a></li>
     <li><a href="#">link three</a></li>
     <li><a href="#">link four</a></li>
    </ul>
    
    </body>
    </html>
    Support:-

    coothead

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>css transition</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
        font-family:verdana,sans-serif;
        font-size:1em;
     }
    #nav {
        width:396px;
        padding:0;
        margin:0 auto;
        list-style-type:none;
     }
    #nav li {
        float:left;
        margin:0 4px;
        background-color:#fed;
        border:1px solid #963;
     }
    #nav a {
        display:block;
        line-height:50px;
        padding:0 10px;
        border:1px solid #963;
        background-color:#fed;
        color:#666;
        box-shadow:0 0 0 #f0f0f0;
        -webkit-transition:all 2s ease;
        -moz-transition:all 2s ease;
        transition:all 2s ease;
     }
    #nav a:hover {
        border-color:#630;
        background-color:#f93;
        color:#000;
        box-shadow:4px 4px 4px #666;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="nav">
     <li><a href="#">link one</a></li>
     <li><a href="#">link two</a></li>
     <li><a href="#">link three</a></li>
     <li><a href="#">link four</a></li>
    </ul>
    
    <script type="text/javascript">
    
    var zxcLIHeight={
    
     init:function(o){
      var id=o.ID,ms=o.Speed,h=o.Height,obj=document.getElementById(id),lis=obj.getElementsByTagName('LI'),lh,ary=[],z0=0;
      for (;z0<lis.length;z0++){
       lh=lis[z0].offsetHeight;
       ary[z0]=[lis[z0],lh,typeof(h)=='number'?h:lh,lh];
       this.addevt(lis[z0],'mouseover','Open',id,z0,true);
       this.addevt(lis[z0],'mouseout','Open',id,z0,false);
      }
      zxcLIHeight['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'?ms:1000
      }
     },
    
     Open:function(id,nu,ud){
      var o=zxcLIHeight['zxc'+id],t;
      if (o){
       t=o.ary[nu][ud?2:1];
       clearTimeout(o.ary[nu][4]);
       this.animate(o,o.ary[nu],o.ary[nu][3],t,new Date(),o.ms*Math.abs((t-o.ary[nu][3])/(o.ary[nu][2]-o.ary[nu][1]))+10);
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[3]=Math.max(now,0);
       ary[0].style.height=ary[3]+'px';
      }
      if (ms<mS){
       ary[4]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[3]=t;
       ary[0].style.height=t==ary[1]?'auto':t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    
    }
    
    zxcLIHeight.init({
     ID:'nav',
     Height:120,
     Speed:1000
    });
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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