0

基本的に、画像にカーソルを合わせるときは、画像を少し動かしてから、マウスアウト時に画像を元の場所に戻します。このタスクを実行するために機能するバージョンのコードがありますが、ユーザーがマウスを画像から画像が元の場所に移動した場合、少し「途切れ」の影響があります。

          -----
          |   |
-----     |img|
|   |     |   |
|img| ==> -----
|   |     xxxxx
-----     xxxxx

上の図では、マウスを画像の上に置くと、2単位上に移動します。マウスアウトすると、画像は元の位置に戻ります。私のコードは、以下のように機能しますが、マウスが以前に空いた領域（たとえば、x）に移動すると、コードは画像に再びカーソルを合わせていると見なし、画像を2単位上に戻します。これにより、上のxでマークされた領域にマウスを合わせると、一種の吃音効果が発生します。

さまざまなアプローチ（たとえば、animate（）の使用、ラッパーdivの追加/削除、setTimeout（）の使用など）を試しましたが、それらはすべて同じ望ましくない効果を生み出します。ページ上のマウスの位置を常に監視し、画像の位置を覚えておくことを検討しましたが、特に1〜n個の画像が存在する可能性があるため、これは過度に思えます。

$(document).ready(function() {
    $('.hoverImage').hover(
        function(){
            $(this).offset({'top':$(this).offset().top-2});
        },
        function(){
            $(this).offset({'top':$(this).offset().top+2});
        }
    );
});

これが問題のデモを行うjsfiddleです：http：//jsfiddle.net/Ut8eK/

ヒントをいただければ幸いです。前もって感謝します！

アップデート

素晴らしい。私は両方の答えのビットを使用することになりました：

$(document).ready(function() {
    $('.hoverImage').wrap('<div class="hoverImageWrapper" style="display: inline-block;">');
    $('.hoverImageWrapper').hover(
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top-10});
        },
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top});
        }
    );
});

上記のjsfiddleは次のとおりです。http：//jsfiddle.net/rf5mE/

class="hoverImage"適切な画像を追加するだけで機能を追加するのは非常に簡単なので、これは私のニーズに最適です。

@Matyasの答えが最初に（約4秒で！）届いたという理由だけで、私は@Matyasを答えとして受け入れました。

ありがとうございます！

4

2 に答える 2

2

画像をラッパーに入れ、ラッパー内のホバーを聞く必要があります。これにより、位置は変わりません。このようにして、一定の効果を得る必要があります

EDIT: The problem is that the image moves lower on mouseout than the size of the div (original size of the image) Solution: add a 10px bottom padding to the div, in the case the image moves 10px lower, to still have a div in its background if it's hovered. (updated link)

TY Huangism for the notification

Update example:

HTML 

    <br />
    <div>< img src="http://placekitten.com/120/100" class="hoverImage" /></div>
    <div>< img src="http://placekitten.com/100/100" class="hoverImage" /></div>
    <div>< img src="http://placekitten.com/110/100" class="hoverImage" /></div>

JS

$(document).ready(function() {
$('div').hover(
    function(){
        //search for the image inside the wrapper (reffered to by this)
        $('.hoverImage', this).offset({'top':$(this).offset().top-10});
    },
    function(){
        $('.hoverImage', this).offset({'top':$(this).offset().top+10});
    }
);
});

CSS:

div{
    display: inline-block;
}
div:hover{
   padding-bottom: 10px;
}
于 2013-03-20T20:48:08.577 に答える
2

Put a wrapper on it and target the wrapper to move the image

http://jsfiddle.net/Ut8eK/4/

HTML

<div class="hoverImage"><img src="http://placekitten.com/120/100" /></div>

JS

$(document).ready(function() {
    $('.hoverImage').hover(
        function(){
            var $img = $(this).find('img');
            $img.offset({'top':$img.offset().top-10});
        },
        function(){
            var $img = $(this).find('img');
            $img.offset({'top':$img.offset().top+10});
        }
    );
});

for multiple divs you do need the inline-block css

于 2013-03-20T20:48:12.393 に答える