Fade and change background image if checkbox is checked

Question

I am still trying to add a fading animation between background images of a div after checking a checkbox.

I have a live example here

My jQuery:

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

and my 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;
 }

and my 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

Option 1: Using CSS 3

Try setting a transition property in the .icons css rule.

Like:

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

Quick example in jsFiddle

Option 2: Using 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