jQuery用fadeIn / Out改变div背景图像 [英] 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.

这是我写的小脚本，它是通过点击其中一种颜色触发的。 / b>

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')");
};

我试着玩 $（'＃image-holder'）。fadeOut （1500）然后 $（'＃image-holder'）。fadeIn（1500）图像。

$('#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.

我知道如果我使用了两个< img src =/> gt ; 并切换其显示/可见性，但不幸的是，我无法改变HTML，所以我正在寻找一个基于jQuery的解决方案。

I know it's easier to achieve that if I'd used two <img src="" /> 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.

感谢帮助！

推荐答案

为我工作的解决方案：

The solution that worked for me:

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

这篇关于jQuery用fadeIn / Out改变div背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！