我有一组缩略图,希望在选择另一个缩略图时将其缩小到 40%。原始缩略图将保持 100% 不透明度。我需要对淡出的缩略图进行全面释放,以便单击页面上的任意位置将使其他缩略图恢复到 100% 不透明度。
这是演示:http://www.dumstr.com/sofeb11/stash/
Js:
$(function() {
$("div#fadeout .stashthumb").click(function () {
$(this).siblings().stop().animate({opacity: 0.4}, 300);
},
function () {
$("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);
});
HTML
<div id="fadeout" class="stasher">
<div style="opacity: 1;" class="stashthumb">
<span><a href="#"><img src="img/stash-01.jpg"></a></span>
</div>
</div>
谢谢!
最佳答案
将你的javascript更改为此(我认为这是你想要的行为,你的问题对我来说并不是100%清楚):
$(function() {
$("div#fadeout .stashthumb").click(function (event) {
$(this).siblings().stop().animate({opacity: 0.4}, 300);
$(this).stop().animate({opacity: 1.0}, 300);
event.stopPropagation(); // don't fire the body click handler
});
// here's the "anywhere on the page" part you wanted
$("body").click(function() {
$("#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);
});
});
关于Jquery 动画缩略图上的不透明度(所选缩略图除外),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5110192/