JQuery нажмите FadeIn/FADEOUT

Question

У меня есть, вероятно, тупой вопрос, но я не могу понять это на моем собственном ...

Я хотел бы альтернативно FadeIn/FADEOUT два DIV по cliking на третьем ,

Вот не рабочий пример: http://jsfiddle.net/ShLqJ/

Вот HTML-код:

<div id="a"> </div> 
<div id="alpha"> ALPHA </div> 
<div id="beta"> BETA </div> 

CSS-:

#a { width: 200px; height: 40px; line-height: 40px; background-color: red; text-align: center; } 
#a:hover { cursor: pointer; } 
#alpha, #beta { width: 200px; height: 100px; margin-top: 20px; } 
#alpha { background-color: blue; } 
#beta { background-color: green; } 

И ЯШ:

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('#alpha').fadeOut("slow", function() { 
      $('#beta').fadeIn(); 
     }); 
    }); 
}); 

я могу сделать первая анимация (fadeOut alpha, fadeIn beta), но при втором нажатии я хотел бы сделать обратное и так далее ...

Любые предложения?

Благодаря

Answer 1

Изменить HTML для:

<div id="a"> 

</div> 

<div class="alpha"> ALPHA </div> 
<div class="alpha"> BETA </div> 

так что вы можете использовать классы, потому что идентификаторы являются уникальными, и вы можете контролировать и вместо того, чтобы один за другим.

Теперь у вас есть два варианта.

Использование fadeToggle (JavaScript):

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('.alpha').fadeToggle(); 
    }); 
}); 

DEMO

Создать изменяющуюся переменную (JavaScript): вар альфа = 0; $ (document) .ready (function() { $ ('# beta'). Hide(); $ ('# a'). Click (function() { $ ('. Alpha'). FadeTo ('медленным', альфа); , если (альфа == 0) { альфа = 1; } еще { альфа = 0;} }); });

DEMO

Я хотел бы использовать первый вариант, поскольку он требует меньше коды и легче читать.

Answer 2

Вы можете выбрать оба элемента и фильтровать видимый, .fadeOut() видный и .fadeIn() скрытый.

var $e = $('#beta, #alpha').filter('#beta').hide().end(); 

$('#a').click(function() { 
    $e.filter(':visible').fadeOut("slow", function() { 
     $e.not(this).fadeIn(); 
    }); 
}); 

http://jsfiddle.net/ShLqJ/8/

Answer 3

Попробуйте

$(document).ready(function() { 
    $('#beta').hide(); 
    var el = '#alpha'; 
    $('#a').click(function() { 
     $(el).fadeOut("slow", function() { 
      el = el == '#alpha' ? '#beta' : '#alpha'; 
      $(el).fadeIn(); 
     }); 
    }); 
}); 

Демо: Fiddle

Answer 4

Вот вариант, который переворачивает между ними:

http://jsfiddle.net/ShLqJ/9/

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('#alpha').toggle(500); 
     $('#beta').toggle(500); 
    }); 
}); 

Answer 5

Я не мог придумать лучшего способа, кроме использования условного оператора:

http://jsfiddle.net/ShLqJ/10/

$(document).ready(function(){ 
    var $alpha = $('#alpha'), 
     $beta = $('#beta').hide(); 

    $('#a').click(function() { 
     var $in, $out; 
     if($alpha.is(':visible')) { 
      $in = $beta, $out = $alpha; 
     } else { 
      $in = $alpha, $out = $beta; 
     } 

     $out.fadeOut("slow", function() { 
      $in.fadeIn(); 
     }); 
    }); 
}); 

Answer 6

Jquery делает это очень легко здесь приведен пример использования fadeToggle():

$(document).ready(function(){ 
    $('#a').click(function() { 
     $('#alpha').fadeToggle(); 
     $('#beta').fadeToggle(); 
    }); 
}); 

Вам нужно только запустить один из двух разделов с display: hidden.

Вот JSFiddle