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?

Why do you want to use tables? It doesn't work at all or not good enough? Because tables don't animate very well. — putvande, Jul 25 '13 at 16:30
ok, I want to make everything re-sizable with the browser size. I can do the auto resizing only through tables, but not sure how with un-order listed ul li. And that's why. — Digital site, Jul 25 '13 at 16:33
With `ul` (or any other element) you have to use percentages in order to make them resizable with your browser. — putvande, Jul 25 '13 at 16:34
ok, I know I have to use %, but not sure how to do it because I never done correctly. I tried many times, but I still unable. call me a dump, but this is the start to make it happening. — Digital site, Jul 25 '13 at 16:38
ok, maybe I don't need to convert the code. I think it is possible to just wrap the ul li with a div and things should work. I will try and see how things go. Thanks — Digital site, Jul 25 '13 at 16:45

score 2 · Answer 1 · answered Jul 25 '13 at 17:22

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'));

Stano · Accepted Answer · 2013-07-25T19:30:11.677

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

edited Jul 25 '13 at 19:30

answered Jul 25 '13 at 17:23

Stano

8,749
6
30
44

Thanks indeed. my great wishes to you in whole your life for the great help. – Digital site Jul 25 '13 at 17:45
1

Thank you. Inspected the hovered element in Page Inspector (in Firefox it can be started with `Ctrl+Shift+i`, in Chrome with `Ctrl+Shift+J`) and there the margin was increasing and increasing, only it was not visible in page layout. It's very useful tool. Have good time! – Stano Jul 25 '13 at 17:48
1

sorry to ask again, but I think there is a little issue I didn't notice at first. if you look at the code here [http://jsfiddle.net/fxdigi/ZhUx8/] this is what I mean. not both blocks should go up at the same time, but only one so the other one shows up when the 1st one jumps... – Digital site Jul 25 '13 at 18:24
great, but still not the same as this one http://jsfiddle.net/fxdigi/ZhUx8/. it suppose to flip when other one goes up... any idea how to do that? – Digital site Jul 25 '13 at 18:40
you are amazing as usual. Thanks big times, mate. That was the exact answer I'm looking for. Thanks again – Digital site Jul 28 '13 at 19:13

Converting jQuery easing code from ul li to table

2 Answers2