확인란을 선택하면 배경 이미지가 흐리게 표시되고 변경됩니다.

Question

확인란을 선택하면 div의 배경 이미지간에 페이드 애니메이션을 계속 추가하려고합니다.

나는 살아있는 예를 here

내 jQuery를 가지고 :

$(function(){ 
$('#check').on('change', function(){ 
if ($(this).is(':checked')) 
{ 
    $(".icons") 
    .css({ 
     'background-image': 'url(/files/images/iconsfilled.svg)' }); 
    } 
    else $(".icons").css({'background':''}); 
    }); 
}); 

내 CSS :

.icons { 
background: url('/files/images/icons.svg') no-repeat; 
margin-left: 32px; 
margin-right: 32px; 
margin-top: 32px; 
margin-bottom: 32px; 
} 
.basketball { 
background-position: -52px 0; 
width: 50px; 
height: 50px; 
} 
.mail { 
background-position: 0 0; 
width: 50px; 
height: 54px; 
} 

내 HTML :

<div class="center iconbox"> 
      <ul class="nostyle inline"> 
       <li><div class="icons mail wow slideInDown" data-wow-delay="1.4s" data-wow-duration=".8s"></div></li> 
       <li><div class="icons basketball wow slideInDown" data-wow-delay="1.2s" data-wow-duration=".8s"></div></li> 
       <li><div class="icons document wow slideInDown" data-wow-delay="1s" data-wow-duration=".8s"></div></li> 
       <li><div class="icons watch wow slideInDown" data-wow-delay=".8s" data-wow-duration=".8s"></div></li> 
       <li><div class="icons weather wow slideInDown" data-wow-delay=".6s" data-wow-duration=".8s"></div></li> 
       <li><div class="icons smiley wow slideInDown" data-wow-delay=".4s" data-wow-duration=".8s"></div></li> 
      </ul> 
     </div> 

Answer 1

옵션 1 : CSS 3 사용

.icons CSS 규칙에 transition 속성을 설정해보십시오.

처럼 :

.icons { 
background: red; 
margin-left: 32px; 
margin-right: 32px; 
margin-top: 32px; 
margin-bottom: 32px; 
transition: 0.5s; 
} 

Quick example in jsFiddle

옵션 2 : jQuery를

$(function(){ 
    $('#check').on('change', function(){ 
    if ($(this).is(':checked')) 
    { 
     $('.icons').fadeTo('slow', 0.3, function(){ 
     $(this).css({'background': 'blue' }); 
     }).fadeTo('slow', 1); 
    } 
     else $(".icons").css({'background':''}); 
    }); 

}); 

SAMPLE USING JQUERY

사용 0