通过淡入淡出来切换两个图像 [英] toggle two images by fading

问题描述

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

How can I toggle two images by fading using jQuery .fadeToggle method.

推荐答案

你必须使用 position：absolute; 将你想要的2个元素放在另一个之上。你先隐藏一个。要进行交叉渐变，您只需在两个元素中同时运行 fadeToggle（）。

You must put the 2 elements you want to crossfade one on top of the other by using position:absolute;. You begin by hiding one. To make a crossfade, you just run simultaneously a fadeToggle() on each of the 2 elements.

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：

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

这篇关于通过淡入淡出来切换两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！