Issue on Jquery Background Image Fade In and Out

Question

I am trying to change a background image of a html5 canvas from dropdown select by using following code

$('select').on('change', function() {
    if (this.value ==1){
      $('#canvas').css('background-image').fadeOut();
      $('#canvas').css({'background': 'url(http://localhost/MapBox/img/cal_NAs.png) no-repeat top right, url(http://localhost/MapBox/img/bg_sh.png) no-repeat top right','background-color' : 'grey'}).fadeIn();
    }
})

but this is not doing the job and I am getting this error on console : Uncaught TypeError: undefined is not a function. can you please let me know what I am doing wrong?

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

You're getting the error because

$('#canvas').css('background-image')

returns the value of the 'background-image' CSS property of the element, which is a string. Strings don't have a method called fadeOut so when you try to call fadeOut() it fails.

However, you have a more fundamental issue - fadeIn and fadeOut apply to elements, not styles of elements.

Check out this question for examples of fading backgrounds

edited May 23 '17 at 10:25

Community

1
1

answered May 15 '14 at 20:44

CupawnTae

14,192
3
29
60

Thanks CupawnTae, sao what is the solution how can I replace background images with using jquery effects? – Suffii May 15 '14 at 20:47
@Behseini I added a link to a related question that should help – CupawnTae May 15 '14 at 20:50

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Fading background images is not a trivial thing.

You should probably look into a solution like this: Change the body background image with fade effect in jquery

edited May 23 '17 at 12:05

Community

1
1

answered May 15 '14 at 20:52

Nick Johnson

190
1
12

Issue on Jquery Background Image Fade In and Out

2 Answers2