1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Jquery animation is not working

Discussion in 'jQuery' started by VonHornmeister, Mar 24, 2016.

0
  1. #1
    Hey,

    My jquery code gets the "click" function, but does not animate, it just "jumps" without animation. Been struggling with it for hours now.

    Jquery code

    $( 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;
      });
  });
  });
    Code (JavaScript):
    HTML Code

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
    <script src="js/main.js"></script>
  </body>
  </html>
    HTML:
     
    VonHornmeister, Mar 24, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    While I'm not DUMB ENOUGH to use the steaming pile of halfwit manure known as jQuery, it almost sounds like preventDefault isn't running. Silly question, but given you've got the train wrecks of jQuery, Angular AND bootcrap all on the same page, are you certain those mind-numbingly dumbass laundry lists of how NOT to build a website are not somehow interfering with each-other? Does stripping those out one at a time to see if they are conflicting help? Hell that stupid shiv BS alone could be causing problems.

    Just saying, with all the endless pointless presentational classes for nothings, massive risks of scripting conflicts, and relative lack of semantic markup -- I'd suggest the Ellen Ripley approach to whatever it is you're working on. Nuke the site from orbit, it's the only way to be sure. I'd be pitching that ENTIRE disaster in the bin and starting over.

    I shudder to think what an inaccessible train wreck the resulting site must be.
     
    deathshadow, Apr 2, 2016 IP