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

尝试在transition css规则中设置.icons属性。

像：

.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

如果选中复选框，则淡化并更改背景图像

1 个答案: