2

我是 Jquery 的新手..我想在我的应用程序中使用反弹效果..我在这里看到了一个示例代码。它在那里工作，但是当复制并保存在我的系统中时它不起作用。它给出了 JS 错误：对象不支持方法/属性“效果”。

有任何想法吗？这是我的代码，

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

4 回答 4

4

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

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

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

因此，在将他的自定义 JQuery UI 切换到 Google 上的 UI 之后，试试这个

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

您可以在此处了解更多信息。JQuery 和 JQuery UI 有相当广泛的文档，所以你应该阅读它们。

此外，这里有一个 JSFiddle供您...摆弄。当您想制作示例或快速测试某些东西时，它很有用。

于 2012-02-24T14:50:45.673 回答
1

您可能忘记包含这个 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

于 2012-02-24T14:50:03.497 回答
1

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

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
于 2012-02-24T14:50:05.643 回答
0

我看到示例使用了这两个 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>

你有这两个文件的功能吗？

于 2012-02-24T14:50:34.633 回答