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

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>

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

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 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 7 часов назад
- 34 просмотра
1

ответ
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 12 часов назад
- 72 просмотра
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- вчера
- 557 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
JavaScript

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

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 34 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 146 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 185 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 86 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 54 просмотра
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Поправить сайт (мобильная версия) на WordPress

24 нояб. 2024, в 04:16

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

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

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

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

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/

Answer 3 · 2017-07-17 23:35:06

Владимир @djQuery

"Кодируем помаленьку" ("Сказка о Тройке")))

Выложите на jsfiddle.

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

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

Answer 4 · 2017-07-18 00:37:43

Steely @Steely

https://jsfiddle.net/1sL3ab7u/

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

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

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

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

Минуточку внимания

Войдите на сайт