0 
var h=0;
var w=0;
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
         h=$(this).height();
         w=$(this).width();
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

<img class="extend" src="a.jpg">
<img class="extend" src="b.jpg">

ホバー機能に問題があります。画像を a.jpg にホバーすると元のサイズに戻すことができません。拡大してから b.jpg にホバーすると、a.jpg が元のサイズに戻るのを待たずに大きくなります。そしてもっと大きい。

サイズを変更せずにホバーして展開するにはどうすればよいですか?

4

3 に答える 3

1

幅と高さを変更する必要がない限り、両方の画像が同じサイズであると仮定して、一度だけ設定する必要があります。

var h=$(".extend").height();
var w=$(".extend").width();
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

フィドル

編集-異なるサイズの画像の場合は、 .data
（）を使用して要素に保存します

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

フィドル

編集-2-
シフトの問題を解決する簡単な方法は、imgタグをインラインブロック要素でラップし、要素の寸法を画像の寸法に設定してから、imgを絶対的に配置することです。

<span><img class="extend" src="a.jpg"></span>
<span><img class="extend" src="b.jpg"></span>​

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
    $(this).parent().css({display:'inline-block', width: $(this).width(), height: $(this).height()})
    .end().css({position:'absolute'});
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

フィドル

于 2012-06-13T05:29:58.917 に答える
0

このようにしてみてください：

 $(".extend").hover(function() {

    //alert(h);
     h=$(this).height();
     w=$(this).width();
    $(this).css({'z-index' : '999' });
    $(this).data('width', w);
    $(this).data('height',h);
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    h=$(this).data('height');
     w=$(this).data('width');
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:w,
            height:h,
            padding: '0px'
        }, 400);
});
于 2012-06-13T05:11:31.370 に答える
0

wとはグローバルであるためh、新しい要素にカーソルを合わせるたびに、それらはどんどん大きくなります。

.data()属性を使用して実際の要素内に格納します。

$(".extend").hover(function() {
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

     $(this).data('original-height', $(this).height());
     $(this).data('original-width', $(this).width());

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('original-width'),
            height:$(this).data('original-height'),
            padding: '0px'
        }, 400);
});
于 2012-06-13T05:11:38.503 に答える