如何通过使用jQuery .fadeToggle
方法来衰减切换两个图像。褪色切换两个图像
Q
褪色切换两个图像
1
A
回答
0
您必须使用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);
});
});
0
这是你想要做什么? 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;
}
0
使用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>
相关问题
- 1. 图像褪色
- 2. 通过黑色切换XIB的褪色?
- 3. ImageSwitcher褪色箭头下一个和上一个图像切换按钮
- 4. 将正常图像的背景图像褪色为褪色图像
- 5. iphone中图像的褪色
- 6. 用actionscript褪色图像
- 7. 背景图像褪色jquery
- 8. 褪色图像 - 秋千
- 9. jquery褪色背景图像
- 10. 褪色背景图像与图像ontop
- 11. 从黑色中褪色图像
- 12. 页脚切换两个图像关闭
- 13. 使用Javascript - 切换两个图像
- 14. jquery褪色悬停图像的精灵
- 15. 在IE7-8中褪色透明图像
- 16. 使BoxDecoration图像褪色/透明
- 17. jquery的褪色为背景图像
- 18. 混合/褪色图像与背景
- 19. jquery的阵列图像褪色背景
- 20. 特定时间后的图像褪色
- 21. 在幻灯片图像褪色徘徊
- 22. 从DIV褪色到图像中的jQuery
- 23. 背景图像不会褪色
- 24. 使用attr SRC图像之间褪色
- 25. javascript/jquery:寻找图像褪色脚本
- 26. 与jQuery在背景图像中褪色
- 27. jquery更改图像与褪色翻转
- 28. 与css3褪色背景图像
- 29. java脚本图像变化和褪色
- 30. 翻转褪色的流体图像