CODEWITHSUNDEEP
javascriptjquery
Ashen Simmer
Ashen Simmer

Reputation: 13

Usage of .fadeIn() and .fadeOut()

I have the following javascript code: 

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').css("opacity", 1);
    }
    else{
        $('#logoheader').css("opacity", 0);
    }
});

This allows me to let a logo appear after I scroll past a banner. However, this is a cold hard appearance. I would like to make this a little more smooth thus I tried to use .fadeIn() and .fadeOut() however I could not get this to work. Is there a quick and easy way to do this? Note, due to compatibility issues I can not use CSS animations.

Upvotes: 0

Views: 232

Answers (8)

LGVentura
LGVentura

Reputation: 1547

you can use the same code and just use CSS transition

#logoheader{
   transition:opacity 1s ease;
   -moz-transition:opacity 1s ease; 
   -webkit-transition:opacity 1s ease; 
   -o-transition:opacity 1s ease; 
   -ms-transition:opacity 1s ease; 
}

thats it..

http://jsfiddle.net/vjSHL/

Upvotes: 0

kosmos
kosmos

Reputation: 4288

Improved @APAD1 solution:

var $target = $('#logoheader'); // declare it only one time

// it's a good idea check if the $target is already visible before force to show
// something that is already shown (and vice versa)

$(window).scroll(function () {
    if ( $(window).scrollTop() >= 250 && !$target.is(':visible') ) { 
        $target.fadeIn('slow');
    }
    else if( $(window).scrollTop() < 250 && $target.is(':visible') ){
        $target.fadeOut('slow');
    }
});

check jsFiddle

Upvotes: 0

Karl Adler
Karl Adler

Reputation: 16796

fadeIn() / fadeOut() sets the elements to display:none after outfading. If you wan't to fade in an element which hasn't display none the function fails. A workaround would be to .hide() the element before fadeIn(), but more propper way is to set display:none initially in CSS

workaround:

$(window).scroll(function () {
    $('#logoheader').hide(); //same as display:none in css
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();
    }
});

Upvotes: 0

Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

This work just fine http://jsfiddle.net/xtatanx/E9ZLm/1/ probably you forgot to remove the opacity:0; in your css.

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();;
    }
});

The CSS

.fixedheight{
    height:800px;
    width:100%;
    background:blue;
    position:relative;
}
#logoheader{
    position:absolute;
    top:250px;
    left:0;
    background:red;
    width:100%;
    height:100px;
    **display:none;**
}

note the display:none;

Upvotes: 0

KennyGHanson
KennyGHanson

Reputation: 104

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();
    }
});

Works as noted, the issue is in your css you have to set #logoheader to display: none rather than opacity: 0

Upvotes: 0

APAD1
APAD1

Reputation: 13666

JS:

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn('slow');
    }
    else{
        $('#logoheader').fadeOut('slow');
    }
});

CSS(added CSS is only to show functionality, display:none; is the only one you will actually need):

#logoheader {
    display:none;
    height:100px;
    background:#000;
    color:#fff;
}

JSFiddle

Upvotes: 3

filype
filype

Reputation: 8380

You can set a duration to the show method in jquery

$('#logoheader').show('slow');

more details on: http://api.jquery.com/show/

Upvotes: 0

Matheus Lima
Matheus Lima

Reputation: 2143

If you want something more smooth, try using: .fadeIn('slow') or .fadeIn('medium').

It works with .fadeOut() as well.

Upvotes: 0

Related Questions