jQuery нажмите fadeIn / fadeOut

Question

jQuery нажмите fadeIn / fadeOut

0

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

Я хотел бы альтернативно fadeIn/fadeOut два div, нажав на третий.

Ниже приведен нерабочий пример: 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; }

И js:

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

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

Какие-либо предложения?

благодаря

Julius Pepperwood 06 янв. 2014, в 01:24

Источник

Теги:

jquery

6 ответов

Ещё вопросы

Arun P Johny · Answer 1 · 2014-01-05T22-47-00.000Z

Пытаться

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

Демо: скрипка

undefined · Answer 2 · 2014-01-05T21-45-00.000Z

Вы можете выбрать оба элемента и фильтровать видимый, .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/

Я думаю, что это мое любимое решение.
Спасибо, это именно тот код, который я искал!

Damien Black · Answer 3 · 2014-01-05T23-10-00.000Z

Вот версия, которая переворачивается между двумя:

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

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

Это довольно приятно, но не тот эффект перехода, о котором мы просили.

Cilan · Answer 4 · 2014-01-05T22-38-00.000Z

Измените свой HTML-код на:

<div id="a">

</div>

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

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

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

1 Используйте fadeToggle (Javascript):

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

DEMO

2 Создайте переменную изменения (Javascript): var alpha = 0; $ (document).ready(function() {$ ('# beta'). hide(); $ ('# a'). click (function() {$ ('. alpha'). fadeTo ('slow', alpha); if (alpha == 0) {alpha = 1;} else {alpha = 0;}});});

DEMO

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

Jivings · Answer 5 · 2014-01-05T22-33-00.000Z

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

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();
        });
    });
});

Stefanos Vakirtzis · Answer 6 · 2014-01-05T21-59-00.000Z

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

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

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

Вот JSFiddle