jQuery change div background-image with fadeIn/Out

I'm trying to create a fadeIn/Out effect on a site I created (edit: site url deleted) Everything works great except when you click on one of the colors in the color palette, it replaces the image with no effect. This is the small script I wrote, which is triggered onclick on one of the colors. function changeImage(newColor) { //var previousImage = $('#image-holder').css("background-image"); $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')"); }; I tried playing with `$('#image-holder').fadeOut(1500)` and then `$('#image-holder').fadeIn(1500)` but it acts funny... it double fades the image. $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()}); What I would like to achieve is onclick on a color box, the current background image will fadeout while the new background image will fade in. I know it's easier to achieve that if I'd used two `` and switch their display/visibility but I unfortunately I can't alter the HTML that much so I'm looking for a jQuery based solution. Appreciate the help!

以上就是jQuery change div background-image with fadeIn/Out的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准