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

Aviko1 · 13.05.24

Привет,

Мой код 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://wmlogs.com/yti/agLLganNodHRwczovL29zcy5tYXhjZG4uY29tL2h0bWw1c2hpdi8zLjcuMi9odG1sNXNoaXYubWluWbu']https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js[/URL]"></script> <script src="[URL='https://wmlogs.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://wmlogs.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://wmlogs.com/yti/agLLganNodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNi9qcy9ib290c3RyYXAubWluWbu']https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js[/URL]"></script> <script src="[URL='https://wmlogs.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:

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

Aviko1

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?