我如何淡出一个 <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 。