jquery fadeIn和fadeOut不工作
所以我有3张图片,当用户点击它时,它会变成另一张图片。但是我想添加一个jQueryjquery fadeIn和fadeOut不工作,jquery,Jquery,所以我有3张图片,当用户点击它时,它会变成另一张图片。但是我想添加一个jQueryfadeOut和fadeIn来提供切换过程的转换效果。这是我想出来的,但不起作用,知道吗 $(".chosen").click(function() { var src = $(this).attr("src"); if (src == "blank.png") (function() { $(this).fadeOut(400); {
fadeOut
和fadeIn
来提供切换过程的转换效果。这是我想出来的,但不起作用,知道吗
$(".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);
}
});
});
在
淡出
动画完成后,您应该更改图像的源并重新转换
文档显示了动画渲染完成时回调的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);
});
});