CODEWITHSUNDEEP
javascriptjquery
Tukhsanov
Tukhsanov

Reputation: 303

jquery fadeIn fadeOut some problems

i wanted to create some fadeIn FadeOut effects. When pressed button the main id should be removed and hidden content should be appered and wise versa. (sorry for my poor english knowledge) Jsfiddle

<div class='button'>Click me</div>
<div id='main'></div>
<div class='hidden'></div>

css

#main {
    width:80%;
    height:300px;
    background:#95a5a6;
    float:right;
    overflow:hidden;
    position: relative;
}
.button {
    width: 90px;
    height:90px;
    border-radius: 50%;
    background:#e74c3c;
    top:70px;
    text-align:center;
    line-height:90px;
    position:absolute;
    cursor: pointer;
    color:#fff;
}

.hidden {
    position:relative;
    width:80%;
    float:right;
    height:250px;
    background:#ddd;
    margin: 0 auto;
    display:none;
}

jquery

$('.button').on('click', function(){
    var main = $('#main');
    var hidden = $('.hidden');


     if(main){
           $(main).fadeOut();
           $(hidden).fadeIn();
        }else{
           $(hidden).fadeOut();
           $(main).fadeIn();
        }
})

Upvotes: 2

Views: 101

Answers (4)

cgatian
cgatian

Reputation: 22994

No need to maintain two fadeIn/fadeOut blocks

$('.button').on('click', function(){
    var visible = $('#main');
    var hidden = $('.hidden');
    hidden = hidden.is(':visible') ? [visible, visible = hidden][0] :hidden;
    visible.fadeOut(function()
    {
       hidden.fadeIn();
    });   
})

http://jsfiddle.net/eN6bg/

Upvotes: 1

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7279

You have to use 1 more variable — flag.

Try this:

var flag = 0;
$('.button').on('click', function(){
    var main = $('#main');
    var hidden = $('.hidden');


     if(flag == 0){
         $(main).fadeOut('fast', function() {
             $(hidden).fadeIn();
             flag = 1;
         });
     }else{
         $(hidden).fadeOut('fast', function() {
             $(main).fadeIn();
             flag = 0;
         });
     }
})

Fiddle

As @cgatian suggested, you can use boolean variable, instead of integer:

var flag = false;
$('.button').on('click', function(){
    var main = $('#main');
    var hidden = $('.hidden');


     if(flag == false){
         $(main).fadeOut('fast', function() {
             $(hidden).fadeIn();
             flag = true;
         });
     }else{
         $(hidden).fadeOut('fast', function() {
             $(main).fadeIn();
             flag = false;
         });
     }
})

Upvotes: 1

Medda86
Medda86

Reputation: 1630

var show = true;
$('.button').on('click', function(){
    var main = $('#main');
    var hidden = $('.hidden');


     if(show){
           $(main).fadeOut();
           $(hidden).fadeIn();
           show = false;
        }else{
           $(hidden).fadeOut();
           $(main).fadeIn();
           show = true;
        }
})

in the css set .hidden to opacity:0 and remove display:none;

Upvotes: 2

sdespont
sdespont

Reputation: 14025

You need to call the fadeIn method in the fadeOut callback

http://jsfiddle.net/jgTh2/12/

$('.button').on('click', function () {
    var main = $('#main');
    var hidden = $('.hidden');

    if (main.is(':visible')) {
        main.fadeOut(function () {
            hidden.fadeIn();
        });

    } else {
        hidden.fadeOut(function () {
            main.fadeIn();
        });
    }
});

Upvotes: 4

Related Questions