CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Stijn Westerhof
Stijn Westerhof

Reputation: 243

Why doesn't my transition work the first time jquery/css

im trying to make my bootstrap navbar smaller at a certain scroll point. I want it go smoothly so I used transition: 0.5s;. It doesn't go smooth at the first time of scrolling down, but when I do it again it goes smoothly. Can someone help me with this? Here is my jcode

$(window).scroll(function () {
var scrollHeigth = $(this).scrollTop();
if (scrollHeigth === 0) {
 $(".navbar").css({
    'height':'100px',
    'transition':' 0.5s'
});
$('.navbar-logo').css({
    'width':'143px',
    'top' : '10px'
});
} else {
 $(".navbar").css({
   'height':'50px',
});
$('.navbar-logo').css({
   'width':'80px',
   'top' : '3px',
   'transition':' 0.5s'
  });
 }
});

Edit: The navbar-logo does go smoothly on the first time of scrolling, the navbar doesn't

Upvotes: 1

Views: 156

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Define the transition in your style sheet rather than script. Its causing the problem.

Try in your <style>

.navbar{
    transition: all ease 0.5s;
 }

Upvotes: 2

Sharon
Sharon

Reputation: 177

You need to add the transition here also.. So that transition works for both actions

$('.navbar-logo').css({
    'width':'143px',
    'top' : '10px'
    'transition':' 0.5s'
});

Upvotes: 0

Related Questions