javascript - 通过淡入淡出切换两个图像

Question

如何使用 jQuery .fadeToggle 方法通过淡入淡出来切换两个图像。

Answer 1

您必须使用 position:absolute; 将想要交叉淡入淡出的 2 个元素放在另一个元素之上。你首先要隐藏一个。要进行交叉淡入淡出，您只需在 2 个元素中的每一个上同时运行 fadeToggle() 即可。

HTML:

<div id="d1" style="background-color:red;"></div>
<div id="d2" style="background-color:blue;"></div>
<span>Click</span>

CSS:

#d1, #d2 {position:absolute;
    top:12px;
    left:12px;
    width:120px;
    height:120px;}

span {position:absolute;
    top:200px;
    left:12px;
    cursor:pointer;}

Javascript:

$(document).ready(function(){
  $("#d1").show();
  $("#d2").hide();
  $("span").click(function(){ // For demo's sake we attach the crossFade to a click event.
    $("#d1").fadeToggle(500);
    $("#d2").fadeToggle(500);
  });
});