Ошибка в эффекте отказов Jquery - PullRequest
Новая
       2

Ошибка в эффекте отказов Jquery

2 голосов
/ 24 февраля 2012

Я новичок в Jquery .. Я хочу использовать эффект отказов в моем приложении ... Я видел пример кода здесь . Он работает там, но когда копируется и сохраняется в моей системе, он не работает. Это дает ошибку JS: объект не поддерживает метод / свойство '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>

Ответы [ 4 ]

4 голосов
/ 24 февраля 2012

Вам нужна соответствующая библиотека, чтобы использовать эти эффекты.

В приведенном вами примере есть ссылка на пользовательский интерфейс JQuery, который, как мне кажется, имеет эффект "отскока" и функцию .effect. 

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

Итак, после переключения его пользовательского JQueryПользовательский интерфейс на 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>

Вы можете узнать больше об этом здесь .JQuery и JQuery UI имеют довольно обширную документацию, поэтому вам следует ознакомиться с ними.

Кроме того, вот JSFiddle для вас ... скрипка вокруг.Это полезно, когда вы хотите создавать примеры или быстро что-то тестировать.

1 голос
/ 24 февраля 2012

$.fn.effect - это метод jQuery UI, для его использования необходимо включить JQuery UI. 

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
1 голос
/ 24 февраля 2012

Возможно, вы забыли включить этот файл 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

0 голосов
/ 24 февраля 2012

Я вижу, что в примере используются следующие файлы 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>

Есть ли у вас функциональность этих двух файлов на месте?

...