0

ウェブサイトに画像を載せようとしていますが、その上にカーソルを合わせると、画像が下にスライドしてその背後にあるテキストが表示されます。

私はこれを機能させましたが、画像の上でマウスを少し動かすと、再び動きます。

jQueryコードは次のとおりです。

$(document).ready(function(){
$('.show').hover(function(){
    $(this).animate({top:'400px'});
},function(){
    $(this).animate({top:'0px'});
    });
});

CSSは次のとおりです。

.hover {
width: 300px;
height: 400px;
background: black;
margin-top: 10px;
overflow: hidden;
position: relative;
 }

.show {
width: 300px;
height: 400px;
background: red;
position: absolute;
 }

マウスがdivから完全に移動するまで、ホバー状態で停止させる方法はありますか?

要求されたJSFiddleは次のとおりです

4

3 に答える 3

1

追加してみてください.stop(true,true)：

$('.show').hover(function() {
    $(this).stop(true,true).animate({
        top: '400px'
    });
}, function() {
    $(this).stop(true,true).animate({
        top: '0px'
    });
});​
于 2012-09-20T20:22:26.080 に答える
0

問題は、画像を移動しているためmouseout、ホバークローズ関数が呼び出されるイベントが発生することです。やりたいことは、次のように個別のmouseover/mouseoutイベントを使用することです。

$('.show').mouseover( function() {
    $(this).animate( {top: '300px'} );
});

$('.hover').mouseout( function() {
    $('.show').animate( {top: '0px'} );
});

ここで私のソリューションを参照してください: http://jsfiddle.net/zRn5w/

このソリューションの唯一の問題は、マウスを画像に移動すると、mouseoutイベントが呼び出されるため、一時的に元に戻ること.hoverです。それは解決するのが少しトリッキーな問題になります...おそらく、領域が正しくなる.hoverように、画像を移動すると同時に高さを拡大します。mouseout

</p>

于 2012-09-20T20:39:05.850 に答える
0

委任モデルを使用する必要があります...

$(function(){
$('#combo').on('mouseover',function(e){
   var $t = $(e.target);
    if( $t.is('img') ){
       $t.animate({top:'89px'});  
       return false;
    }
}).on('mouseout',function(e){
   var $t = $(e.target), $img = $(this).children('img');
    if( e.target == this && e.relatedTarget != $img.get(0) ){
        $img.clearQueue().animate({top:'10px'});
       return false;        
    }
})
});

フィドル-HERE-

于 2012-09-20T20:46:20.607 に答える