褪色切換兩個圖像

如何通過使用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

褪色切換兩個圖像

回答

相關問題