0

I used wow.js on my website, the problem is that every time when I refresh the page, it's animate twice instead of one time.

Here is video demo how it's happening on my system Demo

Here is the page link http://csl.nextgeni.us/loading/index.html

Note: I notice that CSS animation running before document ready and run again after document ready.

Here is snippet 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">
    <title>Home</title>
    <link href="http://csl.nextgeni.us/loading/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://csl.nextgeni.us/loading/css/camera.css" rel="stylesheet">
    <link href="http://csl.nextgeni.us/loading/css/animate.css" rel="stylesheet">
    <link href="http://csl.nextgeni.us/loading/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://csl.nextgeni.us/loading/css/style.css?v002" rel="stylesheet">
  </head>
<body>

<header id="header">
  <div class="topbar">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul class="list-inline text-right no-underline">
            <li><span data-wow-duration="0.8s" data-wow-delay="0.4s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-info"></span><span class="hidden-xs">info@creditstyle.co.uk</span></a></span></li>
            <li><span data-wow-duration="0.8s" data-wow-delay="0.5s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-dm"></span><span class="hidden-xs">Direct Message</span></a></span></li>
            <li><span data-wow-duration="0.8s" data-wow-delay="0.6s" class="wow animated bounceInRight"><span class="icon icon-phone"></span><span>0114 290 1400</span></span></li>
          </ul>
        </div>
      </div>
    </div><!-- .container -->
  </div><!-- topbar -->

  <div class="menu-wrap">
    <div class="navbar navbar-csl " role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="feature-block wow bounceInLeft animated navbar-brand logo" href="#">Credit Style Limited</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;">
          <ul class="nav navbar-nav navbar-right" id="menu">
            
            <li >
              <a data-wow-duration="0.3s" data-wow-delay="1.4s" class="feature-block wow animated fadeInDown" href="index.php">Home</a>
            </li>
            <li class='active'>
              <a data-wow-duration="0.3s" data-wow-delay="1.5s" class="feature-block wow animated fadeInDown" href="our-team.php">Our Team</a>
            </li>
            <li >
              <a data-wow-duration="0.3s" data-wow-delay="1.6s" class="feature-block wow animated fadeInDown" href="pre-legal-collection.php">Services</a>
              <ul class="dropdown">
                <li><a href="pre-legal-collection.php">Pre Legal Collection</a></li>
                <li><a href="legal-collection.php">Legal Collection</a></li>
                <li><a href="field.php">Field</a></li>
                <li><a href="debt-counselling.php">Debt Counselling</a></li>
              </ul>
            </li>
            <li >
              <a data-wow-duration="0.3s" data-wow-delay="1.7s" class="feature-block wow animated fadeInDown disabled">Directions</a>
            </li>
            <li >
              <a data-wow-duration="0.3s" data-wow-delay="1.8s" class="feature-block wow animated fadeInDown" href="contact-us.php">Contact Us</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div><!-- .navbar -->
  </div><!-- .menu-wrap -->
</header><!-- #header -->


<div data-wow-delay=".7s" class="wow animated bounceIn page-heading">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">Our Team</h1>
      </div><!-- .col -->
    </div><!-- .row -->
  </div><!-- .container -->
</div><!-- .page-heading -->


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <img src="http://202.141.239.75/AESd/O2O2CVAU72yX4WEd3LAUNQkwom/wp-content/uploads/2015/04/nature-images.jpg" data-wow-duration="" data-wow-delay="1s" class="wow animated bounceIn img-responsive csl">
    </div><!-- .col -->
    <div class="col-sm-6">
      <div data-wow-duration="" data-wow-delay=".5s" class="wow animated bounceInRight pssh">We're here to help you</div>
      <div data-wow-duration="" data-wow-delay=".6s" class="wow animated bounceInRight">
        <p>Our clients are from all walks of life and are in financial difficulty for all sorts of reasons from ill- health or relationship problems to changes in employment or over committing on credit.</p>
        <p>We understand that making the decision to ask for help with your financial problems can be difficult. That's why we won't ever judge you or take sides, and why we'll always be there to provide the support that's essential to help you out of problem debt.</p>
        <p>Every year we provide much-needed free debt advice to hundreds of thousands of people either over the phone or through our website. We also provide help and support to over 100,000 people who are repaying their debts through one of our free debt management plans.</p>
      </div>
    </div><!-- .col -->
  </div><!-- .row -->
  <div data-wow-duration=".6s" data-wow-delay=".3s" class="wow animated fadeInDown cta">
    <div class="row">
      <div class="col-sm-8">
        <span data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInLeft fa fa-phone"></span>
        <div data-wow-duration="" data-wow-delay=".7s" class="wow animated fadeIn heading">Have a question or need a custom quote?</div>
        <div data-wow-duration="" data-wow-delay=".9s" class="wow animated fadeIn sub-heading">Contact us via e-mail Or just give us a call at 0114 290 1400</div>
      </div><!-- .col -->
      <div class="col-sm-4 text-right">
        <a data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInRight action" href="#">Contact Us</a>
      </div><!-- .col -->
    </div><!-- .row -->
  </div><!-- .cta -->
</div><!-- .container -->


<script src="http://csl.nextgeni.us/loading/js/jquery-2.1.4.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/wow.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/bootstrap.min.js"></script>
<script type="text/javascript">
  new WOW().init();

  jQuery(document).ready(function(e) {
    try{    
      console.log('ready');
    }
    catch(e){
      console.log(e);
    }
  });

  jQuery(window).load(function() {
    try{    
      console.log('loaded');
    }
    catch(e){
      console.log(e);
    }
  })
  
</script>
</body>
</html>
Usman Arshad
  • 868
  • 8
  • 19
  • 1
    http://stackoverflow.com/questions/10727002/jquery-document-ready-fires-twice related , suggest you move your wow.js and dependancies into the `` tag . – Pogrindis Jun 11 '15 at 09:11
  • 2
    Please give us code snippets of the relevant code. Always try to make it as easy as possible for us to solve your problem. If we have to look through your entire site code to find the problem, you might not get the response you want. :). Edit: just had a quick look, question: why are all your scripts in the `` tag? – Jordumus Jun 11 '15 at 09:13
  • @Jordumus Thank you for your comment, I will try to make standalone version of the problem, I made video to make it easy to understand but anyway thanks. for the Body scripts, I ain't put any in body, it's camera plugin that's showing codes in body I guess! – Usman Arshad Jun 11 '15 at 09:20
  • @UsmanArshad I looked at the video, but it only shows me the undesired result. To be able to help you, I'd have to go and look through all your html and js code, which is a pain. :) – Jordumus Jun 11 '15 at 09:21
  • @Jordumus Yes bro I understand that pain and sorry for that, I will try to make code snippets version of the problem. – Usman Arshad Jun 11 '15 at 09:25
  • @Jordumus I've updated question and also added code snippet. – Usman Arshad Jun 11 '15 at 12:26
  • Call you new WOW.init() in jQuery(document).ready or jQuery(document).load. If you look at the source of wow, you will see that it is fired both at document.ready and document.load. Have a look at line 118 here: https://github.com/matthieua/WOW/blob/master/src/wow.coffee – Palash Jun 11 '15 at 12:43
  • @Maxzeroedge thank you for your input, I tried as you said but it didn't helped, still facing same issue. – Usman Arshad Jun 11 '15 at 13:02
  • Try removing one of the ready or load events. See if it fixes your problem – Palash Jun 11 '15 at 13:04
  • I did try but not fixed! – Usman Arshad Jun 11 '15 at 13:23

0 Answers0