Question

我想创建一些fadeIn FadeOut效果。当按下按钮时，应删除主ID，并且应该显示隐藏的内容，反之亦然。（对不起我的英语知识不足）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();
        }
})

Answer 1

您需要在fadeIn回调

中调用fadeOut方法

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

Answer 2

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

在css中设置.hidden为opacity：0并删除display：none;

Answer 3

你必须再使用1个变量 - 标志。

试试这个：

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

正如@cgatian建议的那样，你可以使用布尔变量而不是整数：

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

Answer 4

无需维护两个fadeIn / fadeOut块

$('.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/

jquery fadeInfadeOut有些问题

4 个答案: