jquery fadeIn和fadeOut不工作
问题描述:
所以我有3张图片,当用户点击它时,它会变成另一张图片。但我想添加一个jQuery fadeOut
和fadeIn
以给出切换过程的转换效果。这是我想出来的,但它不起作用,有什么想法?jquery fadeIn和fadeOut不工作
$(".chosen").click(function() {
var src = $(this).attr("src");
if (src == "blank.png") (function() {
$(this).fadeOut(400);
{
$(this).attr("src", "ex.png").fadeIn(400);
}
});
else if (src == "ex.png") (function() {
$(this).fadeOut(400);
{
$(this).attr("src", "oh.png").fadeIn(400);
}
});
else (function() {
{
$(this).fadeOut(400);
$(this).attr("src", "blank.png").fadeIn(400);
}
});
});
答
您应该改变形象,转型的源回到fadeOut
动画完成后。
fadeOut文档显示动画完成渲染时的回调参数complete
。
$(this).fadeOut(400, function(){/*code to be executed when animation finishes*/});
在您的例子,你可以这样做:
$(this).fadeOut(400, function(){
$(this).attr("src", "ex.png").fadeIn(400);
});
你可以重构你的代码,以减少像这样冗余代码:
$(".chosen").click(function() {
var $this = $(this); // avoid calling $ multiple times
$this.fadeOut(400, function() {
var src = $this.attr("src");
var newSrc = "";
// this if/else block could be refactored further
if (src == "blank.png") {
newSrc = "ex.png";
}
else if (src == "ex.png") {
newSrc = "oh.png";
}
else { // if src == "oh.png"
newSrc = "blank.png";
}
$this.attr("src", newSrc).fadeIn(400);
});
});
谢谢你,它的工作吧! – 2013-03-09 03:39:40