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

Question

如何使用jQuery .fadeToggle方法通过淡入淡出切换两张图片。

Answer 1

您必须使用position:absolute;将想要交叉淡入淡出的两个元素放在另一个元素的顶部。你可以从隐藏一个开始。要进行交叉淡入淡出，只需在两个元素中的每个元素上同时运行一个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);
  });
});

Answer 2

这就是你想要做的吗？http://jsfiddle.net/U5GSy/

下面是小提琴中的代码

$(function(){
    $("input:button").click(function(){
        $(".cat").fadeToggle("fast");
    });
});

<img id="cat1" class="cat" src="http://www.crystalinks.com/catop.jpg" alt="" />
<img id="cat2" class="cat" src="http://blindgossip.com/wp-content/uploads/2010/11/cat-claw-1.jpg" alt="" />
<br />
<input type="button" value="Go Kitty Go" />

#cat1 {
    position:absolute;
    top:0;
    left:0;
}

#cat2 {
    display:none;
    position:absolute;
    top:0;
    left:0;
}
input {
    position:absolute;
    top: 220px;
}

Answer 3

使用fadeToggle两次。这将在3个图像之间切换。只需将imgno设置为更改即可。还要记住，这应该大于src数组中的源。

<script src="jquery.js"></script>
<body>
<div id="hold"><img src="img1" />Hold</div>
<script>

var src= ['src1', 'src2', 'src3'];
var count=0;
var imgno=3;

$("#hold").click(
    function (){
        $(this).fadeToggle("fast", 
            function (){
                $(this).find('img').attr('src', src[++count%imgno]);
                $(this).fadeToggle("fast", function (){ return true; });
            }
            )
    }  
  )   
</script>