Question

我想设计一个菜单，当我悬停链接时，链接向前推，当我将鼠标移出时，链接会向后移动。

我知道我可以用.hover函数完成。我不想使用jQuery Events。我想只使用嵌入在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>

Answer 1

你方法中的

this不是你所期望的，因为你没有绑定对元素的调用..而是直接在窗口上下文中调用它.. this === window在你的情况下..

你应该用jQuery进行绑定

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

并删除onmouseover和onmouseout属性..

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

Answer 2

您需要事件处理程序位于A - 标记上，而不是LI。您还需要制作A - 代码display:block或display:inline-block，以便他们使用填充。

Answer 3

你使用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()函数用于在光标移动到li时停止动画。

Answer 4

你不能在jQuery选择器的javascript函数中使用jQuery（this）。你必须发送这样的元素。

<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>

Answer 5

如果你现在出于某种原因真的不想使用事件绑定，你可以通过这种方式将referens作为参数/参数传递给当前元素;

<强> HTML

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

<强>的Javascript

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

填充菜单由JQuery

5 个答案: