褪色切换两个图像

如何通过使用jQuery .fadeToggle方法来衰减切换两个图像。褪色切换两个图像

2011-03-10 djt

您必须使用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); 
    }); 
});

来源

2011-03-10 09:01:02

这是你想要做什么？ 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; 
}

来源

2011-03-10 09:01:13 chris

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

来源

2011-03-10 09:08:26

褪色切换两个图像

回答

相关问题