jquery fadeIn fadeOut一些問題

我想創建一些淡入淡出效果。按下按鈕時，應刪除主ID，隱藏內容應顯示，反之亦然。（對不起，我可憐的英語知識）Jsfiddle jquery fadeIn fadeOut一些問題

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

來源

2014-05-03 Tukhsanov

問題是什麼？ jsFiddle顯示你在找什麼。 –

後，我再次按它不顯示我的主要身份證 – Tukhsanov

我添加了答案。希望，我已經正確理解你。 –

你需要調用在該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(); 
     }); 
    } 
});

來源

2014-05-03 18:52:11 sdespont

你必須使用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; 
     }); 
    } 
})

來源

2014-05-03 18:48:57

布爾是不是更合適？ – cgatian

@cgatian我只是建議，他可以使用布爾值:) –

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

在.hidden到不透明度的CSS集

：0和刪除顯示：無;

來源

2014-05-03 18:52:52 Medda86

'opacity：0'不適用於所有瀏覽器。 –

無需維護兩個淡入/淡出塊

$('.button').on('click', function(){ 
    var visible = $('#main'); 
    var hidden = $('.hidden'); 
    hidden = hidden.is(':visible') ? [visible, visible = hidden][0] :hidden; 
    visible.fadeOut(function() 
    { 
     hidden.fadeIn(); 
    }); 
})

來源

2014-05-03 18:58:31 cgatian

jquery fadeIn fadeOut一些問題

回答

相關問題