Question

我尝试了CSS路线，但对我来说都是新手并且仍在学习但似乎无法解决问题。我的JS在下面切换背景位置，每1秒在精灵中显示一个新图像，但是想知道是否有人知道我怎么能给它一个小规模的效果，所以当它变化时会变小一点然后再变回正常大小才会变为下一个背景位置？

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下面切换背景位置以显示新图像精灵每1秒钟，但想知道是否有人知道我怎么样给它一个小规模的效果，所以当它变化增长一点点在更改到下一个背景位置之前恢复正常大小？

尝试在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>

jQuery缩放效果，缩放为1.1，当背景位置发生变化时返回1

1 个答案: