2012-02-24 3 views
2

Я новичок в JQuery. Я хочу использовать эффект отскока в своем приложении. Я видел пример кода here. Он работает там, но когда он копируется и сохраняется в моей системе, он не работает. Это дает ошибку JS: Object не поддерживает метод/свойство 'effect'.Ошибка в эффекте jQuery bounce

Любые идеи? Вот мой код,

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

Для использования этих эффектов вам нужна библиотека.

В приведенном примере есть ссылка на пользовательский интерфейс JQuery, который, как я считаю, имеет эффект «отскока» и .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 имеют довольно обширную документацию, поэтому вы должны прочитать их.

Также here's a JSFiddle для вас ... fiddle вокруг с. Это полезно, когда вы хотите сделать примеры или проверить что-то быстро.

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

1

$.fn.effect - это пользовательский интерфейс jQuery, вам нужно включить jQuery UI на своей странице, чтобы использовать его.

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

Я вижу, что образец использует эти 2 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> 

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

Смежные вопросы