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中编写了你的脚本，效果很好。请参阅code here。

我认为您的问题是由您在脚本标记之间编写的代码造成的。

问候。

Answer 4

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

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

在MouseOver和MouseOut上调用jQuery函数

4 个答案: