클릭 이벤트에서 배경 이미지에 애니메이션을 적용하는 방법

Question

아래의 jquery 코드로 사용자가 다른 배경 이미지를 클릭하여 선택하면 원활하게 전환 효과를 얻으려고하지만 작동하지 않는 것 같습니다. 페이지의 내용이 아닌 배경 이미지 만 애니메이션으로 만들려고합니다. 여기

$('.bg1').click(function() { 
    ($this).animate({opacity: 0}, 'slow', function() { 
    $(this) 
     .css({'background-image': 'url(img/bg-2.jpg)'}) 
     .animate({opacity: 1}); 
    }); 
}); 

는 바이올린입니다 : 작은 misatke 코드에서이 http://www.jsfiddle.net/Tw8Ph/4

Answer 1

: 코딩, 그래서 당신은 당신의 CSS 배경 이미지를 설정해야 var

$('.bg1').click(function() { 

    var $this = $(this); 

    $this.animate({opacity: 0}, 'slow', function() { 
    $this 
     .css({'background-image': 'url(img/bg-2.jpg)'}) 
     .animate({opacity: 1}); 
    }); 
}); 

Answer 2

HTML 코드 : 대신 2 행에 실수를 한

$('.bg1').click(function() { 
    $(this).animate({opacity: 0}, 'slow', function() { 
    $(this) 
    .css({'background-image': 'url(img/bg-2.jpg)'}) 
    .animate({opacity: 1}); 
}); 
}); 

($this).animate({opacity: 0},이면 $(this).animate({opacity: 0},이어야합니다.

해피 당신이 많이 $this 사용하려고하는 경우

Answer 3

에 넣어 추천 클릭 한 버튼을 나타내는 this를 사용하지 마십시오. 당신의 마지막 바이올린은 저에게 잘 보일 것 같습니다. 유일한 실수는 세 번째 버튼이 잘못된 CSS 클래스로 인해 영향을 받았다는 것입니다. `$ this`은 당신이 사용하고있는 변수

$('body').css('background-image','url(source)');

http://jsfiddle.net/Tw8Ph/6/