在 MouseOver 和 MouseOut 上调用 jQuery 函数答案

【问题标题】：Calling a jQuery function on MouseOver and MouseOut在 MouseOver 和 MouseOut 上调用 jQuery 函数
【发布时间】：2011-03-13 20:17:43
【问题描述】：

我有以下代码：

<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，但没有任何反应。

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

谢谢

【问题讨论】：

标签： javascript jquery css html

【解决方案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>

【讨论】：

给其他人的注释（花了我几秒钟的时间有什么区别！），@Darin 已正确打开和关闭脚本标签

【解决方案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>

【讨论】：

【解决方案3】：

我在 jsfiddle 中编写了您的脚本，效果很好。请参阅code here。

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

问候。

【讨论】：

【解决方案4】：

你的函数需要在单独的脚本标签中：

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

【讨论】：