0

私のHTMLには、次のような写真がいくつかあります。

<img class="gallery_left" id="left4" src="assets/community/fall_regionals/img01.png" />

画像にはクラスと ID があります。また、クラス gallery_left と ID left4 の両方に JavaScript を使用しています。

$(function() {

    $('img.gallery_left').mouseover(function(){

        $(this).animate({
    borderWidth: '10px',
    width: '750px',
    height: '500px',
    marginLeft: '1px',
    zIndex: '15'}, 'default');

    });

    $('img.gallery_left').mouseout(function(){

        $(this).animate({
    borderWidth: '4px',
    width: '300px',
    height: '200px',
    marginLeft: '1px',
    zIndex: '0'}, 'default');

    });

    $('#left4').mouseover(function(){

        $(this).animate({
    marginTop: '105px'}, 'default');

    });

    $('#left4').mouseout(function(){

        $(this).animate({
    marginTop: '261px'}, 'default');

        });

    });

クラス gallery_left の JavaScript が最初に実行され、次に ID left4 が実行されることがわかりました。場合によっては、それらは同時に実行される (または少なくとも実行されるように見える) 場合がありますが、マウスアウトすると、画像は 90% の時間で 1 つのアクション (クラス) で縮小され、別のアクション (ID) で元に戻ります。これは、多くの画像にとって大きな問題であることがわかりました。これを少しきれいにして問題をなくす方法はありますか？また、個々の画像ごとに特定のクラスを作成して、2 つの個別のアクションを「組み合わせる」ことを提案することは、クラスが多すぎるため、問題外です。どんな助けでも大歓迎です！ありがとう！！

4

1 に答える 1

0

これを試してください：ライブデモ

$(function() {
    var margin_top;

    $('img').mouseover(function(){
        if($(this).hasClass('gallery_left')) {
            if($(this).attr('id') == "left4") {
                margin_top = '105px';
            } else {
                $(this).css('marginTop');
            }

            $(this).animate({
                borderWidth: '10px',
                width: '750px',
                height: '500px',
                marginLeft: '1px',
                zIndex: '15',
                marginTop: margin_top,
            }, 
            'default');
        } else if($(this).hasClass('gallery_right')) {
            if($(this).attr('id') == "right6") {
                margin_top = '105px';
            } else {
                $(this).css('marginTop');
            }

            $(this).animate({
                borderWidth: '10px',
                width: '750px',
                height: '500px',
                marginLeft: '199px',
                zIndex: '15',
                marginTop: margin_top,
            }, 
            'default');
        }
    });

    $('img').mouseout(function(){
        if($(this).hasClass('gallery_left')) {
            if($(this).attr('id') == "left4") {
                margin_top = '261px';
            } else {
                $(this).css('marginTop');
            }

            $(this).animate({
                borderWidth: '4px',
                width: '300px',
                height: '200px',
                marginLeft: '1px',
                zIndex: '0',
                marginTop: margin_top,
            }, 
            'default');
        } else if($(this).hasClass('gallery_right')) {
            if($(this).attr('id') == "right6") {
                margin_top = '261px';
            } else {
                $(this).css('marginTop');
            }

            $(this).animate({
                borderWidth: '4px',
                width: '300px',
                height: '200px',
                marginLeft: '661px',
                zIndex: '0',
                marginTop: margin_top,
            }, 
            'default');
        }
    });
});
于 2013-02-21T15:59:19.157 に答える