Анимация Jquery не работает

Aviko1

Привет, Мой код jquery получает функцию «щелчка», но не анимируется, он просто «прыгает» без анимации. Борюсь с этим уже несколько часов. JQuery-код

 <!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<meta http-equiv="X-UA-Compatible" content="IE=край">


<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1">


<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->


<title>Kohvik Gustav</title>


<!-- Bootstrap -->


<link href="css/bootstrap.min.css" rel="stylesheet">


<link rel="stylesheet" href="css/bootstrap-theme.min.css">


<link rel="stylesheet" href="css/main.css">


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->


<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->


<!--[if lt IE 9]>


<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL29zcy5tYXhjZG4uY29tL2h0bWw1c2hpdi8zLjcuMi9odG1sNXNoaXYubWluWbu']https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js[/URL]"></script>


<script src="[URL='https://lumtu.com/yti/au44uanNodHRwczovL29zcy5tYXhjZG4uY29tL3Jlc3BvbmQvMS40LjIvcmVzcG9uZC5taWt5C']https://oss.maxcdn.com/respond/1.4.2/respond.min.js[/URL]"></script>


<![endif]-->


</head>


<body>


<!-- Content -->


<div class="slideBg" id="slideBg">


<!-- NAVBAR -->


<div class="row header">


<nav class="navbar navbar-default navbar-fixed-top col-md-8 col-md-offset-2" role="navigation">


<div class="container-fluid">


<!-- Brand and toggle get grouped for better mobile display -->


<div class="navbar-header ">


<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">


<span class="sr-only">Toggle navigation</span>


<span class="icon-bar"></span>


<span class="icon-bar"></span>


<span class="icon-bar"></span>


</button>


</div>


<!-- Collect the nav links, forms, and other content for toggling -->


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


<ul class="nav navbar-nav menu col-xs-12 col-xs-offset-6 ol-md-12 col-md-offset-6 col-lg-12 col-lg-offset-6">


<li><a href="#slideBg"><img class="menuImage" src="img/Slide1/Header/menu/mugIcon.png" alt=""><span class="menuItem">AVALEHT</span></a></li>


<li><a href="#slide2"><img class="menuImage" src="img/Slide1/Header/menu/menuIcon.png" alt=""><span class="menuItem">MENÜÜ</span></a></li>


<li><a href="#slide3"><img class="menuImage" src="img/Slide1/Header/menu/locationIcon.png" alt=""><span class="menuItem">ASUKOHT</span></a></li>


<li><a class="" href="#slide4"><img class="menuImage" src="img/Slide1/Header/menu/meistIcon.png" alt=""><span class="menuItem">MEIST</span></a></li>


</ul>


</div><!-- /.navbar-collapse -->


</div><!-- /.container-fluid -->


</nav>


</div>


<!-- /NAVBAR -->


<div class="slide1" id="slide1">


<img class="s1Logo helper" src="img/Slide1/Logo/logo.png" alt="">


<div class="nool"></div>


</div>


</div>


<div class="slide2" id="slide2">


<ul class="sideMenu">


<li id="ahjukoogid" class="sMenuItem dashed">Ahjukoogid</li>


<li id="magusadAmpsud" class="sMenuItem dashed">Magusad Ampsud</li>


<li id="plaadikoogid" class="sMenuItem dashed">Plaadikoogid</li>


<li id="soolasedAmpsud" class="sMenuItem dashed">Soolased Ampsud</li>


<li id="tordid" class="sMenuItem dashed">Tordid</li>


<li id="tordiloigud" class="sMenuItem dashed">Tordilõigud</li>


<li id="tryhvlid" class="sMenuItem dashed">Trühvlid</li>


<li id="quiche" class="sMenuItem dashed">Quiche</li>


</ul>


<div class="tryhvlid">


<!-- Nimed ja Hinnad -->


</div>


<div class="nool"></div>


</div>


<div class="slide3" id="slide3">


asd


<div class="nool"></div>


</div>


<div class="slide4" id="slide4">


asd


<div class="nool"></div>


</div>


<!-- Footer -->


<!-- <footer class="footer">


<div class="container">


<p class="text-muted ">Jorx &copy 2016</p>


</div>


</footer> -->


<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8yLjIuMC9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js[/URL]"></script>


<!-- Latest compiled and minified JavaScript -->


<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNi9qcy9ib290c3RyYXAubWluWbu']https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js[/URL]"></script>


<script src="[URL='https://lumtu.com/yti/a4ii4anNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2FuZ3VsYXJqcy8xLjUuMi9hbmd1bGFyLm1pb1mL']https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js[/URL]"></script>


<script src="js/main.js"></script>


</body>


</html>

Код (JavaScript): HTML-код

 $( document ).ready(function() { // Navigation $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 5, 'swing', function () { window.location.hash = target; }); }); });

HTML:

kiselevnkt

Хотя я не ДОСТАТОЧНО ТУПОЙ, чтобы использовать дымящуюся кучу недоумкового навоза, известную как jQuery, это звучит почти так, как будто предотвращениеDefault не работает.

Глупый вопрос, но, учитывая, что у вас на одной странице собраны все обломки jQuery, Angular И мусор, уверены ли вы, что эти ошеломляющие тупые списки того, как НЕ создавать веб-сайт, каким-то образом не мешают друг другу? Поможет ли удаление их по одному, чтобы увидеть, не конфликтуют ли они? Черт, эта глупая заточка сама по себе может вызвать проблемы.

Просто говоря, со всеми бесконечными бессмысленными презентационными классами из ничего, огромными рисками конфликтов сценариев и относительным отсутствием семантической разметки - я бы предложил подход Эллен Рипли к тому, над чем вы работаете.

Нанесите ядерный удар по объекту с орбиты, это единственный способ быть уверенным.

Я бы выбросил ВСЮ эту катастрофу в мусорное ведро и начал бы все сначала. Я содрогаюсь при мысли о том, каким недоступным местом крушения поезда должно быть это место.

Похожие темы	Дата
Сергей Швайцер - Jquery (2014)	19.10.2024, 18:10
Курс по Angular.JS - Кантор (2016)	19.10.2024, 18:10
[специалист] Javascript. Уровень 3. Knockout.js	19.10.2024, 18:10
Как получить значение идентификатора из URL-адреса и динамически создавать контент	19.10.2024, 18:10
Изменить порядок массива объектов	19.10.2024, 18:10
Кнопка копирования текстового поля JS	19.10.2024, 18:10
[ШП] JavaScript	19.10.2024, 18:10
М. Хавербек. Выразительный JavaScript	19.10.2024, 18:10
Секреты JavaScript ниндзя. 2 издание - Резиг, Бибо, Марас (2017)	19.10.2024, 18:10
JavaScript для верстальщика - Валак (2016)	19.10.2024, 18:10

Анимация Jquery не работает

Aviko1

kiselevnkt

I AM

Интересно