我如何淡出一個 <div> 進入另一個 <div> ？

Question

我覺得這個問題已經被問過多次了，但是我的代碼有問題。 當然，沒有褪色效果也能很好地工作，但是我似乎無法獲得褪色效果。 老實說，我不知道應該在哪里發布.fadein和.fadeout標簽。 這是我之前沒有.fadein和.fadeout屬性的代碼。

 function SwapDivs(da, db) { var d = document.getElementById(da); if (d.style.display == "block") { d.style.display = "none"; document.getElementById(db).style.display = "block"; } else { d.style.display = "block"; document.getElementById(db).style.display = "none"; } } $(document).ready(function(){ $("da").hover(function(){ $('db').fadeIn('slow'); $('da').fadeOut('slow'); }); 

 html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <BR> <BR> <CENTER> <div id="wda_id" style="display:block; width:240px; height:160px; border: 1px solid #ddd; margin: 0;" onmouseover="SwapDivs('wda_id','wdb_id')"> Blah </div> <div id="wdb_id" style="display:none; width:240px; height:160px; border: 2px solid #000000; background: #DDD" onmouseout="SwapDivs('wda_id','wdb_id')"> blah blah blah </div> </CENTER> 

Answer 1

你可以試試看 如果修改CSS，則可以實現完全的fadeOut fadeIn效果。 參見示例http://jsfiddle.net/LKwmW/3/

 function SwapDivs(da, db) { var d = document.getElementById(da); if (d.style.display == "block") { $('#'+da).hide(); $('#'+db).fadeIn('slow'); document.getElementById(db).style.display = "block"; } else { $('#'+db).hide();$('#'+da).fadeIn('slow'); } } 

 html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <BR> <BR> <CENTER> <div id="wda_id" style="display:block; width:240px; height:160px; border: 1px solid #ddd; margin: 0;" onmouseover="SwapDivs('wda_id','wdb_id')"> Blah </div> <div id="wdb_id" style="display:none; width:240px; height:160px; border: 2px solid #000000; background: #DDD" onmouseout="SwapDivs('wda_id','wdb_id')"> blah blah blah </div> </CENTER> 

Answer 2

當您使用jQuery時，可以使用單行方法fadeToggle完成。檢查以下代碼。

 $(document).ready(function(){ $('.parent').mouseenter(function(){ $(this).find('div').fadeToggle('slow'); }); $('.parent').mouseleave(function(){ $(this).find('div').fadeToggle('slow'); }) }); 

 .parent { height:160px; width:240px; position:relative; } .parent > div { position:absolute; top:0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='parent'> <div id="wda_id" style="display:block; width:240px; height:160px; border: 1px solid #ddd; margin: 0;"> First Blah </div> <div id="wdb_id" style="display:none; width:240px; height:160px; border: 2px solid #000000; background: #DDD"> First blah blah blah </div> </div> <br/> <div class='parent'> <div id="wda_id" style="display:block; width:240px; height:160px; border: 1px solid #ddd; margin: 0;"> Second Blah </div> <div id="wdb_id" style="display:none; width:240px; height:160px; border: 2px solid #000000; background: #DDD"> Second blah blah blah </div> </div> 

UPDATE對於多個此類元素，現在您可以直接連接父類。 無需理會子ID 。