Почему не работает код?

Question

JackShcherbakov @JackShcherbakov

JavaScript

Почему не работает код?

Все файлы подключены верно, где-то ошибка в синтаксисе, но где?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Итоговая стоимость</title>
	<style>
		#totalCost{
			width:250px;
			height:400px;
			background-color:#66CCFF;
			border-radius:0 0 30px 30px;
			font-family:Arial, Helvetica, sans-serif;
			border-bottom:#3399CC 5px solid;
			box-shadow:0 0 30px #003333;
			position:absolute;
			right:1%;
			top:-382px;
		}
		#totalCost p{
			color:white;
			background-color:#3399CC;
			text-align:center;
			margin-top:382px;
			border-radius:0 0 30px 30px;
			padding:5px 0 5px 0;
			cursor:pointer;
		}
		body{
			margin:0;
		}
	</style>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#totalCost p').click(function(){
				$('#totalCost').animate(
				{
				'top' : '0'
				}, 300, 'easeOutBounce'
				);
			});
		});	
	</script>
</head>
<body>
	<article id="totalCost">
	<p>Click me!</p>
	</article>
</body>
</html>

Вопрос задан более трёх лет назад
818 просмотров

11 комментариев

Подписаться 1 Оценить 11 комментариев

Niriter Inc. @niriter

а что он вообще должен делать?

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Niriter Inc.: Просто при клике блок выдвигается, точнее должен выдвигаться.

Написано более трёх лет назад
Александр Шаповал @sanek_os9

Попробуй перенести js вниз документа

Написано более трёх лет назад
Arris @Arris

api.jquery.com/animate
Мне не нравится параметр 'top' переданный как параметр анимации. Вы чего хотели-то?

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Arris: При клике позицике блока относительно верха должна ровняться 0, когда до клика она -381px.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Александр Шаповал: Нет, надо что бы был document.ready

Написано более трёх лет назад
Stalker_RED @Stalker_RED

где-то ошибка в синтаксисе, но где?
Там же пишется номер строки. В некоторых браузерах прямо ошибка подчеркивается.

Написано более трёх лет назад

Александр Шаповал @sanek_os9

JackShcherbakov:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Итоговая стоимость</title>
  <style>
    #totalCost{
      width:250px;
      height:400px;
      background-color:#66CCFF;
      border-radius:0 0 30px 30px;
      font-family:Arial, Helvetica, sans-serif;
      border-bottom:#3399CC 5px solid;
      box-shadow:0 0 30px #003333;
      position:absolute;
      right:1%;
      top:-382px;
    }
    #totalCost p{
      color:white;
      background-color:#3399CC;
      text-align:center;
      margin-top:382px;
      border-radius:0 0 30px 30px;
      padding:5px 0 5px 0;
      cursor:pointer;
    }
    body{
      margin:0;
    }
  </style>
  <script src="js/jquery-3.2.1.min.js"></script>
 </head>
<body>
  <article id="totalCost">
  <p>Click me!</p>
  </article>
 <script>
    $(document).ready(function(){
      $('#totalCost p').click(function(){
        $('#totalCost').animate(
        {
        'top' : '0'
        }, 300, 'easeOutBounce'
        );
      });
    });	
  </script>
</body>
</html>

Написано более трёх лет назад

Arris @Arris
Stalker_RED:
TypeError: n.easing[this.easing] is not a function[Learn More] jquery-2.2.4.min.js:3:23082

Вот что там пишется. Если поставить jquery-3-2.1 - ошибка аналогичная, но не в одном экземпляре, а генерируется в цикле, ~80 ошибок в секунду.

Возможно, easeOutBounce - jQuery не имеет такого метода анимации.
Upd: действительно не знает.
Написано более трёх лет назад
Arris @Arris
Stalker_RED: ну тем не менее - смотрите мой ответ ниже.

if ( this.options.duration ) { this.pos = eased = jQuery.easing[ this.easing ]( // <--------------- jQuery.easing[this.easing] is not a function percent, this.options.duration * percent, 0, 1, this.options.duration ); }

В css возможно (даже наверняка), не спорю. Но мы имеем дело не с CSS.

И кстати, заметьте: вы мне дали ссылку на jQuery UI, а не на чистый jQuery Animate, который подключает топикстартер.

P.S. Собственно это ответ топикстартеру: не все файлы подключены верно. :)
Написано более трёх лет назад
Stalker_RED @Stalker_RED

Arris: Да, я уже тоже разобрался и запостил ответ.

Написано более трёх лет назад

Решения вопроса 2

Комментировать

Пригласить эксперта

Ответы на вопрос 2

2 комментария

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 57 минут назад
- 14 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 4 часа назад
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 14 часов назад
- 71 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 16 часов назад
- 32 просмотра
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 23 часа назад
- 140 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- вчера
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- вчера
- 304 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- вчера
- 76 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Поддержка сервиса по рассылкам

26 апр. 2024, в 15:12

30000 руб./за проект

Unity AR прототип

26 апр. 2024, в 15:11

15000 руб./за проект

Исправить получение заказов без заполненных обязательных полей БЗ

26 апр. 2024, в 15:07

1500 руб./в час

Niriter Inc.: Просто при клике блок выдвигается, точнее должен выдвигаться.
Попробуй перенести js вниз документа
api.jquery.com/animate
Мне не нравится параметр 'top' переданный как параметр анимации. Вы чего хотели-то?
Arris: При клике позицике блока относительно верха должна ровняться 0, когда до клика она -381px.
Александр Шаповал: Нет, надо что бы был document.ready
где-то ошибка в синтаксисе, но где?
Там же пишется номер строки. В некоторых браузерах прямо ошибка подчеркивается.
JackShcherbakov:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Итоговая стоимость</title> <style> #totalCost{ width:250px; height:400px; background-color:#66CCFF; border-radius:0 0 30px 30px; font-family:Arial, Helvetica, sans-serif; border-bottom:#3399CC 5px solid; box-shadow:0 0 30px #003333; position:absolute; right:1%; top:-382px; } #totalCost p{ color:white; background-color:#3399CC; text-align:center; margin-top:382px; border-radius:0 0 30px 30px; padding:5px 0 5px 0; cursor:pointer; } body{ margin:0; } </style> <script src="js/jquery-3.2.1.min.js"></script> </head> <body> <article id="totalCost"> <p>Click me!</p> </article> <script> $(document).ready(function(){ $('#totalCost p').click(function(){ $('#totalCost').animate( { 'top' : '0' }, 300, 'easeOutBounce' ); }); }); </script> </body> </html>
Stalker_RED:
TypeError: n.easing[this.easing] is not a function[Learn More] jquery-2.2.4.min.js:3:23082

Вот что там пишется. Если поставить jquery-3-2.1 - ошибка аналогичная, но не в одном экземпляре, а генерируется в цикле, ~80 ошибок в секунду.

Возможно, easeOutBounce - jQuery не имеет такого метода анимации.
Upd: действительно не знает.
Stalker_RED: ну тем не менее - смотрите мой ответ ниже.

if ( this.options.duration ) { this.pos = eased = jQuery.easing[ this.easing ]( // <--------------- jQuery.easing[this.easing] is not a function percent, this.options.duration * percent, 0, 1, this.options.duration ); }

В css возможно (даже наверняка), не спорю. Но мы имеем дело не с CSS.

И кстати, заметьте: вы мне дали ссылку на jQuery UI, а не на чистый jQuery Animate, который подключает топикстартер.

P.S. Собственно это ответ топикстартеру: не все файлы подключены верно. :)
Arris: Да, я уже тоже разобрался и запостил ответ.

Answer 1 · 2017-07-18 03:54:48

easeOutBounce - jQuery не знает такого метода анимации.

см. аналогичный вопрос на StackOverflow: https://stackoverflow.com/q/11336898/5127037

Вам нужно подключить библиотеку jQuery UI effects.

Ответ кроется тут:

init: function( elem, options, prop, end, easing, unit ) {
		this.elem = elem;
		this.prop = prop;
		this.easing = easing || jQuery.easing._default;  // <-- параметр easing задан.
		this.options = options;
		this.start = this.now = this.cur();
		this.end = end;
		this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
	},
	cur: function() {
		var hooks = Tween.propHooks[ this.prop ];

		return hooks && hooks.get ?
			hooks.get( this ) :
			Tween.propHooks._default.get( this );
	},
	run: function( percent ) {
		var eased,
			hooks = Tween.propHooks[ this.prop ];

		if ( this.options.duration ) {
			this.pos = eased = jQuery.easing[ this.easing ](   // <--- BREAK POINT HERE
				percent, this.options.duration * percent, 0, 1, this.options.duration
			);
		} else {
			this.pos = eased = percent;
		}

Answer 2 · 2017-07-18 04:57:16

Похоже, в самом jQuery по умолчанию есть только linear и swing. Остальные типы можно подключить при помощи jQueryUI или плагина gsgd.co.uk/sandbox/jquery/easing

Работающий пример: https://jsfiddle.net/mep7vz36/