Question

我尝试在mouseleave上的mouseenter上使用jquery增加和减少pic。问题是如果我增加background-size：覆盖到'background-size'：'150％'（例子）然后回来掩盖动画不再工作

jQuery(document).ready(function ($) {


    $('body').on('mouseenter', '.img-featured', function () {
        var $this = $(this);
        $this.stop().animate({
            'background-size': '150%',
        });
    }).on('mouseleave', '.img-featured', function () {
        var $this = $(this);
        $this.stop().animate({
            'background-size': 'cover',
        });
    });

});

.test{
width:200px;
}

.img-featured {
    position: relative;
    float: left;
    width:  100%;
    height: 200px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body>
<div class="test">
<div class="img-featured" style="background-image:url('http://www.bergamonews.it/photogallery_new/images/2016/02/petaloso-533039.660x368.jpg');"></div>
</div>
</body>

如何回到封面图片？

编辑部分解决

而不是.animate，请使用.css并立即使用

 $('body').on('mouseenter', '.img-featured', function () {
    var $this = $(this);
    $this.stop().animate({
        'background-size': '150%',
    });
}).on('mouseleave', '.img-featured', function () {
    var $this = $(this);
    $this.stop().css({
        'background-size': 'cover',
    });
});

如何增加背景大小：覆盖

0 个答案: