填充菜單通過JQuery

我想設計一個菜單，當我懸停一個鏈接，鏈接推進，當我將鼠標移出，鏈接向後移動。填充菜單通過JQuery

我知道我能做到這一點與.hover function.I不想使用jQuery事件。我只想使用它們嵌入在html標籤中的javascript事件。

這裏是我的嘗試：

<script type="text/javascript"> 
    function MIn() 
    { 
    jQuery(this).animate({paddingLeft:"20px"},500); 
    } 
    function MOut() 
    { 
    jQuery(this).animate({paddingLeft:"0px"},500); 
    }    
    </script> 
</head> 
<body> 
    <ul> 
    <li onmouseover = "MIn()" onmouseout="MOut()" ><a href="#">Home</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Download</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Products</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"> <a href="#">Register</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">About</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Contact</a></li> 
    </ul> 
</body>

來源

2012-02-01 sap

什麼不起作用？ – locrizak 2012-02-01 15:02:46

鏈接不會被填充！ – sap 2012-02-01 15:03:36

你不可能在javascript函數WOUT的jQuery選擇使用jQuery（這一點）。你必須發送像這樣的元素。

<script type="text/javascript"> 
     function MIn(elm) 
     { 
     jQuery(elm).animate({paddingLeft:"20px"},500); 
     } 
     function MOut(elm) 
     { 
     jQuery(elm).animate({paddingLeft:"0px"},500); 
     }    
     </script> 
    </head> 
    <body> 
     <ul> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)" ><a href="#">Home</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Download</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Products</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"> <a href="#">Register</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">About</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Contact</a></li> 
     </ul> 
    </body>

來源

2012-02-01 15:15:09 Yorgo

不錯的東西，你能解釋更多！ – sap 2012-02-01 15:16:51

@ user1182970，[Gaby]（http://stackoverflow.com/a/9098196/1149495）解釋了爲什麼這是有效的，而不是你的。另外，爲什麼你不使用綁定？ – 2012-02-01 15:33:18

該死的，打我吧。 :)基本上每個事件都有一個目標來解僱它。所以你將目標作爲參數傳遞給函數。這樣，函數就知道應用哪個元素。我不得不說，最好從你的html中刪除與行爲有關的任何東西。最佳做法是在JavaScript中創建事件偵聽器（如果您不想使用框架）。這給了你的行爲和表示層之間的一個很好的分離。 – 2012-02-01 15:35:52

您需要的事件左撇子是在A - 標籤，而不是LI。您還需要製作A -tags display:block或display:inline-block以便他們使用填充。

來源

2012-02-01 15:08:15

如果將填充設置爲li de anchor，則向右移動，因爲他的父級獲得填充。所以這是正確的方式，你的方式不是... – 2012-02-01 15:09:19

它使鏈接動畫更具語義，而不是它們的包裝。 – 2012-02-01 15:11:26

不工作，我改變了填充邊緣左側。 – sap 2012-02-01 15:13:45

你使用jQuery，爲什麼不是事件api？

$(document).ready(function() { 
    $('li').hover(function() { 
    // onmouseover 
    $(this).animate({'padding-left': '20px'}, 500); 
    }, function() { 
    // onmouseout 
    $(this).animate({'padding-left': 0}, 500); 
    }); 
});

此代碼工作做好了，一個活生生的例子：http://jsfiddle.net/HXpPF/2/

的stop()功能是當光標變爲李的停止動畫。

來源

2012-02-01 15:08:40

我已經提到沒有.hover – sap 2012-02-01 15:12:04

@Stefan，'.hover（）'是mouseenter和mouseleave的快捷方式，[來源]（http://james.padolsey.com/jquery/git/jQuery.fn.hover /）。 – 2012-02-01 15:32:04

this你的方法是不針對你所期望的，因爲你不來電綁定的元素..而是直接調用它在窗口背景下.. this === window你的情況..

你應該做的jQuery

$('li').hover(MIn, MOut);

綁定並刪除onmouseover和onmouseout屬性..

演示http://jsfiddle.net/FydWH/

來源

2012-02-01 15:09:20

我想完成沒有約束？任何方式？ – sap 2012-02-01 15:12:37

如果你現在出於某種原因真的不想將使用事件綁定，你可以通過referens當前元素作爲參數/參數這種方式;

HTML

<li onmouseover = "MIn(this)" onmouseout="MOut(this)" ><a href="#">Home</a></li>

的Javascript

function MIn(el) { 
    jQuery(el).animate({paddingLeft: "20px"}, 500); 
}

來源

2012-02-01 15:15:57 Stefan

填充菜單通過JQuery

回答

相關問題