Question

我有一个可能是愚蠢的问题，但我无法自己解决这个问题......

我希望通过在第三个上进行fadeIn / fadeOut两个div。

这是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），但是在第二次点击时，我想做反向等等......

有什么建议吗？

由于

Answer 1

您可以选择这两个元素并过滤可见的元素.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 2

尝试

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

演示：Fiddle

Answer 3

将您的HTML更改为：

<div id="a">

</div>

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

所以你可以使用类，因为ID是唯一的，你可以控制它们而不是一个一个。

现在你有两个选择。

1 使用fadeToggle（Javascript）：

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

<强> DEMO

2 创建更改变量（Javascript）： var alpha = 0; $（文件）。就绪（函数（）{ $（'＃beta版本）中隐藏（）。 $（'＃a'）。click（function（）{ $（'。alpha'）。fadeTo（'slow'，alpha）; if（alpha == 0） { alpha = 1; }其他 { alpha = 0; } }）; }）;

<强> DEMO

我会使用第一个选项，因为它需要更少的代码并且更容易阅读。

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启动其中一个div。

以下是JSFiddle

jQuery单击fadeIn / fadeOut

6 个答案: