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

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

最佳答案

您必须使用position:absolute;将要交叉淡化的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);
  });
});

关于javascript - 通过淡入淡出切换两个图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5257226/