在MouseOver和MouseOut上调用jQuery函数

Question

我有以下代码：

<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
  $(function() {
    $('.webPanel').mouseover(function(){
        $('.webPanel').animate({'width': '350px'}, 100);

      });
  });
</script>

这不起作用。 您可能会说，它应该在鼠标悬停时将.webPanel div扩展到350px，但是什么也没有发生。

我怎样才能使这个东西正常工作？ 我不明白为什么它不起作用！

谢谢

Answer 1

您需要为jquery包含一个单独的脚本：

<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $('.webPanel').mouseover(function(){
        $('.webPanel').animate({'width': '350px'}, 100);

      });
  });
</script>

Answer 2

<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
    //you script
</script>

悬停功能如何

<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>

  $(function() {
    $('.webPanel').hover(
        function(){
        $('.webPanel').animate({'width': '350px'}, 100);
    },
    function (){
        $('.webPanel').animate({'width': '500px'}, 100);
    }

      });
  });
</script>

Answer 3

我用jsfiddle编写了脚本，效果很好。 请在此处查看代码 。

我认为您的问题是由于您在script标签之间编写的代码所致。

问候。

Answer 4

您的函数需要在单独的脚本标记中：

<script type="text/javascript">           // this missing
  $(function() {
    $('.webPanel').mouseover(function(){
       $('.webPanel').animate({'width': '350px'}, 100);
    });
  });
</script>                                 // this missing