轉換的jQuery easying從UL李碼錶

這裏我有一個jquery緩解輸入/輸出功能，我試圖把它從UL李轉化爲表而不是，它沒有爲我工作。轉換的jQuery easying從UL李碼錶

$(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); 
    }); 
    });

我不知道什麼樣的變化我必須讓其他比.topnav李更換我的主UL類到.topnav TR TD

我以前用過這個網站：

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

然後我把它改爲表是這樣的：

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

但到目前爲止沒有運氣。根本沒有工作。可能有一些人失蹤或什麼是錯的變化...

什麼想法？

來源

2013-07-25 Digital site

你爲什麼要使用表？它根本不起作用或者不夠好？因爲表格動畫效果不好。 – putvande

好吧，我想讓所有的東西都可以通過瀏覽器大小來重新設置大小。我只能通過表格進行自動調整大小，但不知道如何使用未命令列出的ul li。這就是爲什麼。 –

使用'ul'（或任何其他元素），您必須使用百分比才能使其在瀏覽器中調整大小。 – putvande

錨默認是行內元素，如果你改變它的風格display:block;那麼動畫是可見的。

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

jsfiddle/another alternative

來源

2013-07-25 17:23:26 Stano

謝謝@Stano。這太棒了。奇蹟般有效。 –

非常感謝。我對你的整個生命中的偉大的祝福都給予了很大的幫助。 –

謝謝。檢查懸停元素頁面檢查器（在Firefox它可以用'Ctrl鍵啓動+ Shift + i'，在Chrome中使用'按Ctrl + Shift + J'），並有餘量日益增加，越來越多，只是它不是在頁面可見佈局。這是非常有用的工具。玩得開心！ – Stano

下面是UL轉換爲表（在某種程度上）的函數：

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

與用法：

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

來源

2013-07-25 17:22:57

非常感謝@ user15051256，您的解決方案也可以工作。 –

轉換的jQuery easying從UL李碼錶

回答

相關問題