填充菜单通过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

回答

相关问题