Question

我有一种感觉这个问题已被多次询问，但我的代码存在问题。当然它没有褪色效果很好但我似乎无法获得淡化效果。老实说，我不知道应该在哪里发布.fadein和.fadeout标签。以下是我之前没有.fadein和.fadeout属性的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你可以试试这个。如果你修改你的CSS，你可以实现一个完整的淡入淡出效果。请参见示例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>

<强>更新对于多个这样的元素，现在可以直接连接父类。无需担心孩子ID s。

如何将一个<div>淡入另一个<div>？

2 个答案: