将JQuery Fade效果合并到删除和添加类中(Incorporate JQuery Fade effect into removing and adding classes)

将JQuery Fade效果合并到删除和添加类中(Incorporate JQuery Fade effect into removing and adding classes)

我有这个代码，可以更改应用于元素的类，这些类包含背景图像。 我想让图像淡入淡出而不仅仅是切换。

$(document).ready( function(){ var toggleImage = function(){ if($(".home").hasClass("home1")){ $(".home").removeClass("home1").addClass("home2"); console.log("First IF"); } else if($(".home").hasClass("home2")){ $(".home").removeClass("home2").addClass("home3"); console.log("Second IF"); } else if($(".home").hasClass("home3")){ $(".home").removeClass("home3").addClass("home1"); console.log("Third IF"); } console.log("End of the conditionals"); } console.log("Outside of the conditionals"); setInterval(toggleImage, 5000) });

i have this code that changes the classes that apply to an element and those classes contain a background image. i want to make the images fade in and out as opposed to just switching.

$(document).ready( function(){ var toggleImage = function(){ if($(".home").hasClass("home1")){ $(".home").removeClass("home1").addClass("home2"); console.log("First IF"); } else if($(".home").hasClass("home2")){ $(".home").removeClass("home2").addClass("home3"); console.log("Second IF"); } else if($(".home").hasClass("home3")){ $(".home").removeClass("home3").addClass("home1"); console.log("Third IF"); } console.log("End of the conditionals"); } console.log("Outside of the conditionals"); setInterval(toggleImage, 5000) });

最满意答案

你问的是不可能直接的。 您将需要使用CSS3淡入淡出效果（ http://webdesign.about.com/od/css3tutorials/a/fade-in-and-out-with-css3.htm ）

What you are asking is not possible directly. You will need to use CSS3 fade effect(http://webdesign.about.com/od/css3tutorials/a/fade-in-and-out-with-css3.htm)