Question

我是Jquery的新手..我想在我的应用程序中使用弹跳效果..我看过一个示例代码here。它可以在那里工作，但是当我复制并保存在我的系统中时它无效。它给出了JS错误：Object不支持方法/属性'effect'。

有什么想法吗？这是我的代码，

<!DOCTYPE>
<html>
<head>
<title>Bounce Effect</title>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
     $(document).ready(function() {

      $("#button").click(function(){
         $("#Target").effect( "bounce", {times:3}, 300 );
      });
   });
   </script>

   <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </style>
</head>

<body>

   <p>Click the button</p>
   <button id="button"> Bounce </button>

   <div id="Target" class="target" >
   </div>  
</body>

</html>

Answer 1

您需要适当的库才能使用这些效果。

在您提供的示例中，有一个指向JQuery UI的链接，我相信它具有“反弹”效果和.effect功能。

<script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>

因此，在将自定义JQuery UI切换到Google上的那个之后，请尝试使用

<!DOCTYPE>
<html>
<head>
<title>Bounce Effect</title>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
     $(document).ready(function() {

      $("#button").click(function(){
         $("#Target").effect( "bounce", {times:3}, 300 );
      });
   });
   </script>

   <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </style>
</head>

<body>

   <p>Click the button</p>
   <button id="button"> Bounce </button>

   <div id="Target" class="target" >
   </div>  
</body>

</html>

您可以详细了解here。 JQuery和JQuery UI有相当广泛的文档，所以你应该阅读它们。

另外，here's a JSFiddle让你...... fiddle。当您想要快速制作示例或测试某些内容时，它非常有用。

Answer 2

您可能忘记包含此JavaScript文件：

 src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>
   <script type="text/javascript" language="javascript">

这是一个定制的jQuery，他们用来使弹跳效果起作用......

您可以在此处获取代码：

http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js

Answer 3

$.fn.effect是一个jQuery UI方法，您需要在页面上包含jQuery UI才能使用它。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Answer 4

我看到该示例使用这两个js文件：

<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>

您是否具备这两个文件的功能？

Jquery跳出效果出错

4 个答案: