CODEWITHSUNDEEP
jquery
user2060549
user2060549

Reputation: 1

replace .animate() with fadeIn/ fadeOut

im relatively new to jQuery and having a little problem. previously i've used .animate to animate my menu when i scroll down, but i have to change it to fadeIn and fadeOut. here is my code:

if($(this).scrollTop() > 100) {
bar.stop().animate({'top' : '0px'}, 1250);
} else {
bar.stop().animate({'top' : top}, 1250);
}

Upvotes: 0

Views: 248

Answers (3)

Talha Akbar
Talha Akbar

Reputation: 10030

if($(this).scrollTop() > 100) {
bar.stop().fadeOut( function() { $(this).animate({'top' : '0px'}, 1250); }, "slow");
} else {
bar.stop().fadeIn( function() { $(this).animate({'top' : '0px'}, 1250); }, "slow");
}

Your question is vague. But you can use any of the answer's code which suits you. And also refer to documentation because they have examples there.

Upvotes: 0

Klik
Klik

Reputation: 1776

if($(this).scrollTop() > 100) {
   bar.stop().fadeOut();
} else {
   bar.stop().fadeIn();
}

For future reference please go here: http://api.jquery.com/fadeOut/

People are happier when you provide links showing you did some kind of research. Anyways, cheers.

Upvotes: 0

JohnJohnGa
JohnJohnGa

Reputation: 15685

You just need to call fadeIn/fadeOut on your element

  bar.fadeOut('slow');

or

  bar.fadeIn('slow');

You can also attach a callback function. For more information see:

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

Upvotes: 1

Related Questions