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

追加する必要があるのは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); });

これが実際の例です