CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
pablito.aven
pablito.aven

Reputation: 1165

JQuery animation and slideUp delay issue

I am using a bootstrap navbar, and above the navigation links I have some text which I want to hide when the user scrolls down. Also, i want the navbar to be fixed top.

I am using a slideUp() and slideDown() to hide/show the text above the navbar, and I am using Jquery animate() to modify the navbar's height. (I need to have it's height explicit because of CSS reasons irrelevant to this issue)

The problem is that when I scroll to the top, the animate() gets queued after the slideDown() (Maybe it is not queued but it has some unwanted delay), which does not happen in the scrolling-down case. I want them to be simultaneous.

Here is a JSFiddle with minimal code reproducing the problem.

Here is the relevant minimal code:

html:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="header">
          Atención 24 horas 0800-777-8101
    </div>
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="brand" href="#"><img src="img/logo.jpg" class="logo" /></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
         <li class="active"><a href="#">DSDSADSA</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">ADSASD</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div style="height:1000px;background-color:#ccc;padding:50px;"></div>

css:

.navbar {
  height: 110px;
}
div.header{
  text-align:right;
  height:50px;
}

And the most important, Javascript:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      console.log('a');
      $('.navbar').animate({height: '60px'});
      $('div.header').slideUp();
    } else {
      console.log('b');
      $('.navbar').animate({height: '110px'});
      $('div.header').slideDown();
    }
  });
});

Upvotes: 1

Views: 163

Answers (3)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

Determining if your .navbar is currently in the state of animation will do the trick, based on which you can decide NOT to animate.

Just add the following snippet which uses jQuery's is() method, and returns false if the .navbar is in the animation state:

  if($('.navbar').is(':animated')){
    return false;
  }

JSFiddle

Upvotes: 0

BenG
BenG

Reputation: 15154

Your problem is, everytime you scroll when the scrollTop is greater than 0 it is applying:-

$('.navbar').animate({height: '110px'});
$('div.header').slideDown();

and not just when its up, (height and slideUp). This causes the else to fire multiple times. see the console for a

One way of fixing this is applying a class to .header to determine if you need to apply the animation. like so:-

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0 && !$('div.header').hasClass('hide')) {
      console.log('a');
      $('.navbar').animate({height: '60px'}, "fast");
      $('div.header').slideUp("fast").toggleClass('hide');
    } else if ($(document).scrollTop() == 0 && $('div.header').hasClass('hide')) {
      console.log('b');
      $('.navbar').animate({height: '110px'}, "fast");
      $('div.header').slideDown("fast").toggleClass('hide');
    }
  });
});

Fiddle

or you could use data or a variable, etc.

Upvotes: 1

nitish koundade
nitish koundade

Reputation: 801

Before you apply the animation or slideup make use of stop function to clear the queue. 

$('div.header').stop();
$('.navbar').stop();

Check out the working demo for you code here JSfiddle

Upvotes: 1

Related Questions