2

I want to change the background image, which I built a ChangeBg function for, to be faded.

Why is this not working? What am I doing wrong?

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"type="text/javascript"></script>
<script language="JavaScript">
    function changeBg (color) {
        document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-  repeat";
        $("changeBg").fadeIn("slow"); }
</script>
Colin Brock
  • 21,267
  • 9
  • 46
  • 61
shay benily
  • 39
  • 1
  • 8
  • Such background transparency is not possible. – Madara's Ghost Nov 15 '11 at 19:51
  • similar question answered here http://stackoverflow.com/questions/977090/jquery-fade-in-background-image – Liam Allan Nov 15 '11 at 19:52
  • I recomend you use only one API to traverse the DOM of the html (In this case, jquery). Instead of doing "document.getelementbyId", use $('#wrapper'). Also, what is $('changeBg') element? – JavierIEH Nov 15 '11 at 19:53

5 Answers5

0

I'm assuming you are missing a #:

 $("#changeBg").fadeIn("slow");

if changeBg is an ID of a html element.

document.getElementById // <-- knows it's an ID
$() // <- can select classes, tags, :first's, :contain's, etc, etc

So jQuery using the hashtag, #, to specify an ID.

Joe
  • 80,724
  • 18
  • 127
  • 145
0

A few things at a glance:

Is the url path of the image relative to the page? In other words, should url(Images be url(/Images?

I'm assuming that you don't actually have spaces in no- repeat in your code? I'd assume that browsers wouldn't automatically clean that up for you.

Lastly (but perhaps most importantly), you have to fix your selector: $("changeBg") should probably be $("#changeBg") if changeBg is the element id attribute.

Demian Brecht
  • 21,135
  • 5
  • 42
  • 46
0

What is changebg here ? Did you not mean $('#wrapper').fadeIn(); ?

Jasper
  • 75,717
  • 14
  • 151
  • 146
mddw
  • 5,570
  • 1
  • 30
  • 32
0

Try to use either jquery or javascript. don't mixed up

function changeBg (color) {
        $("#wrapper").css("background","url(Images/"+color+".jpg) no-repeat");
        $("#wrapper").fadeIn("slow"); 
}
Ariful Islam
  • 7,639
  • 7
  • 36
  • 54
  • Hi Arif,I have tried it your way,I changed the $("#changeBg").fadein("slow"); to $("#wrapper").fadein("slow"); because the ChangeBg is my function and warpper is my element,but it still don't work. – shay benily Nov 15 '11 at 20:03
  • in which event did you call the function? – Ariful Islam Nov 15 '11 at 20:05
0

Here is an example of fading in an element with a background-image: http://jsfiddle.net/jasper/XeKLw/

HTML:

<div></div>

CSS:

div {
    width  : 300px;
    height : 300px;
    background : url(...) center center;
    display : none;
}

JS:

$(document).on('click', function () {
    $('div').fadeToggle();
});

Note: .on() is new in jQuery 1.7 and replaces .bind() in this situation.

Jasper
  • 75,717
  • 14
  • 151
  • 146