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;
}
문제
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?
해결책 2
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;
}
다른 팁
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'));