Converting jQuery easing code from ul li to table

Question

Here I have a jQuery easing in/out feature, and I was trying to convert it from ul li to table instead, it didn't work for me.

   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-135'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });

I'm wondering what changes do I have to make other than replacing my main ul class from .topnav li to .topnav tr td

I used this html before:

 <ul class="topnav">
    <li><a href="#">my link</a><div>hello</div></li>
 </ul>

then I changed it to table like this:

<table class="topnav">
<tr>
<td><a href="#">my link</a><div>hello</div></td>
</tr>
</table>

but so far no luck. didn't work at all. Possibly there is something missing or something is wrong in the changes...

Any idea?

Answer 1

Anchor is by default inline element, if you change its style to display:block; then the animation is visible.

table td a {
    display:block;
    margin-bottom: 115px;
}
table td {
    height:135px;
    float:left;
    overflow:hidden;
}

jsfiddle / another alternative

Answer 2

here's a function to convert UL to TABLE (somehow):

function ul2table(ul){
    var tbl = $('<table class="topnav"/>');
    ul.find('li').each(function(){
        tbl.append($('<tr/>').append($('<td/>').html($(this).html())));
    });
    ul.replaceWith(tbl);
}

and usage:

  ul2table($('ul.topnav'));