jquery fadeIn fadeOut有些问题

我想创建一些淡入淡出效果。当按下按钮时，主id应该被删除，隐藏的内容应该被显示，反之亦然。(很抱歉我英语知识不好(Jsfidle

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

您需要在fadeOut回调中调用fadeIn方法

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

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集中。隐藏为opacity:0并删除display:none；

您必须再使用一个变量--标志。

试试这个：

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

无需维护两个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/

相关内容

最新更新

热门标签：