在jquery中淡入淡出效果

-1

我需要在下面的腳本中添加淡入淡出功能。我需要css element其中得到風格display: none fadeOut和css element其獲得風格display: block淡入。我該怎麼做？在jquery中淡入淡出效果

$(document).ready(function() { 
    $("#contacts").toggle(function() { 
     $("#phone_2").css("display", "block"); 
     $("#phone_1").css("display", "none"); 
    }, function() { 
     $("#phone_1").css("display", "block"); 
     $("#phone_2").css("display", "none"); 
    }); 
});

來源

2012-06-20 Kode Plus

我編輯[我的答案]（http://stackoverflow.com/a/11113551/601179）來了很多更清潔的方式 – gdoron

$(document).ready(function() { 
    $("#contacts").toggle(function() { 
     $("#phone_2").fadeIn(); 
     $("#phone_1").fadeOut(); 
    }, function() { 
     $("#phone_1").fadeIn(); 
     $("#phone_2").fadeOut(); 
    }); 
});

順便問一下，你能做到這一點簡單了很多有：

$(document).ready(function() { 
    $("#contacts").click(function() { 
     $("#phone_2, #phone_1").toggle(400); 
    }); 
});

Live DEMO

來源

2012-06-20 05:52:37 gdoron

看起來不錯的代碼!!!! –

@VirendraRajput。我想人們喜歡寫...... 6行而不是2行。 – gdoron

是的，他們確實做到了！ –

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#contacts").toggle(function() { 
     $("#phone_2").fadeIn(); 
     $("#phone_1").fadeOut(); 
    }, function() { 
     $("#phone_1").fadeIn(); 
     $("#phone_2").fadeOut(); 
    }); 
}); 

</script>

來源

2012-06-20 05:51:48

這裏有一個fiddle

而且

$(document).ready(function() { 
    $("#contacts").toggle(function() { 
     $("#phone_2").fadeIn(); 
     $("#phone_1").fadeOut(); 
    }, function() { 
     $("#phone_1").fadeIn(); 
     $("#phone_2").fadeOut(); 
    }); 
});

來源

2012-06-20 05:57:09

看看我的演示。很好嗎？ – gdoron

在jquery中淡入淡出效果

回答

相關問題