javascript - jQuery 缩放效果，缩放 1.1 并在背景位置更改时返回 1

Question

我尝试了 CSS 路线，但对我来说都是新的，仍在学习，但似乎无法解决。我下面的 JS 切换背景位置以每 1 秒在 sprite 中显示一个新图像，但想知道是否有人知道我如何给它一个小规模的效果，所以当它改变一点点然后回到正常大小，然后再改变到下一个背景位置？

JS:

    // Avatar animations
var avatarInterval;
function startAvatarAnimation() {

    var i = 0;
    var avatarSpeed = 500;
    var avatarCount= 11;
    var avatarHeight = 250;
    var avatarTotalHeight = 2750;

    avatarInterval = setInterval(function(){
        i++;
        if(i > 11){
            i = 0;
        }
        $(".avatars").css({'background-position' : '0 -' + (i*avatarHeight) + 'px' });
        $(".avatars").toggleClass('scaleIn', 'scaleOut');
    }, avatarSpeed);

    return false;

}

function stopAvatarAnimation(){
    clearInterval(avatarInterval); 
    $(".avatars").css({'background-position' : '0 0' });
    return false;
}

Answer 1

JS below switches the background position to show a new image in the sprite every 1 second but wondering if anyone knew how i can kind of give it a small scale effects so when it changes grows a little then back to normal size before change to the next background position?

尝试使用 transition在 css , 将持续时间设置为 avatarSpeed 的一半或 background-position 总持续时间的一半影响 ;设置 transitionend事件地点 .one()以防止递归调用 transitionend处理程序，.removeClass() , .addClass()切换在 css 定义的缩放效果

CSS

.avatars {
  transition: transform 500ms ease-in-out;
  width: 100px;
  height: 100px;
  background-image: url(/path/to/background-image);
}
.avatars.scaleIn {
  transform: scale(1.1, 1.1);
}
.avatars.scaleOut {
  transform: scale(1.0, 1.0);
}

js

// Avatar animations
var avatarInterval;
function startAvatarAnimation() {

    var i = 0;
    var avatarSpeed = 500;
    var avatarCount= 11;
    var avatarHeight = 250;
    var avatarTotalHeight = 2750;

    avatarInterval = setInterval(function(){
        i++;
        if(i > 11){
            i = 0;
        }
        $(".avatars").css({'background-position' : '0 -' + (i*avatarHeight) + 'px' })
        .removeClass("scaleOut").addClass("scaleIn")
        .one("transitionend", function() {
          $(this).removeClass("scaleIn").addClass("scaleOut");
        });
    }, avatarSpeed);

    return false;

}

$(".avatars").on("click", function() {
    $(this).removeClass("scaleOut").addClass("scaleIn")
    .one("transitionend", function() {
    $(this).removeClass("scaleIn").addClass("scaleOut");
  })
})

.avatars {
  transition: transform 500ms ease-in-out;
  width: 100px;
  height: 100px;
  background-image: url(http://lorempixel.com/100/100/nature);
}
.avatars.scaleIn {
  transform: scale(1.1, 1.1);
}
.avatars.scaleOut {
  transform: scale(1.0, 1.0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="avatars"></div>