I am currently working on implementing a fading animation that transitions between background images of a div when a checkbox is checked.
You can view a live example here
Here is my jQuery code:
$(function(){
$('#check').on('change', function(){
if ($(this).is(':checked'))
{
$(".icons")
.css({
'background-image': 'url(/files/images/iconsfilled.svg)' });
}
else $(".icons").css({'background':''});
});
});
And this is 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;
}
Lastly, here is the HTML code I am using:
<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>