jquery - 上下移动背景图像

Question

我有一个带有背景图像的 div。如何做到这一点：当您将鼠标悬停在该 div 上时，背景图像向上移动 5 像素，然后向下移动 5 像素？比如快点，慢点。

我的代码：

CSS

<style>
.place {
background:url(../img/place.png) no-repeat 6px 50%;
}
</style>

HTML

 <div class="place">
    123 Something Street<br/>
    UB5 212 Liverpool
    </div>

如何通过过渡做到这一点？还是jquery？

Answer 1

使用 CSS3

.place {
    background:url(http://lorempixel.com/20/20/) no-repeat;
}

div.place:hover {
    animation:myanim 0.5s;
    -webkit-animation:myanim 0.5s;
    /* Safari and Chrome */
}

@keyframes myanim {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

@-webkit-keyframes myanim
/* Safari and Chrome */
 {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

Answer 2

用于财产.animate()：background-position

    $('div.place').on('hover', function() {
      $(this).animate({
         'background-position-y': '15px'
      }, 500, 'linear');
   });

Answer 3

你也可以试试 CSS3：

   transition: background-position 1s ease;
   -moz-transition: background-position 1s ease; /* Firefox */
   -webkit-transition: background-position 1s ease; /* Safari and Chrome */

Answer 4

您需要添加的只是background-position样式到您的 div 背景，并做一些小的 jQuery 的东西：

1. 添加到CSS：

   背景位置：10px 10px；

2. 并准备好 jQuery ：

   $('.place').hover(function(){ $('.place').css('background-position', '10px 5px'); setTimeout(function(){ $('.place'). css('背景位置', '10px 10px');
   }, 2000); });

这是工作示例