0

現在、2つの画像にJavaScriptを適用しています。ビデオはここで見ることができます：http ：//www.youtube.com/watch？v = DYc8swGK5Lwビデオでホバーした最初の画像は正しく機能しますが、2番目の画像は機能しません。2番目の画像は、最初の画像のようにトランジションするのではなく、ホバーの直後にマージントップを適用しているように見えます。これにより、ブラウザが混乱し、マウスオーバーとマウスオーバーが1回または2回行われてから、安定性が回復します。どちらの画像にもgallery_leftクラスが適用されていますが、ビデオでホバーされた最初の画像には、left4IDが適用されています。ビデオにカーソルを合わせた2番目の画像には、left7IDが適用されています。最後に、これがコードです。

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

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

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

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

他のすべての写真にもコードを適用する必要がありますが、最初は、これら2つの写真にコードを適用しています。私を助けて、このコードの問題を特定してみてください。

4

3 に答える 3

0

最初の画像では、実際にはmargin-topをまったく変更していません (コードのどの時点でも、margin-topID を持つ画像の を変更しませんleft1)。@Dennis が指摘したように、$(this).css('marginTop');何もしません。したがって、実際には、margin-topコードは2番目の画像だけでなく、全体的に問題があります-最初の画像で実際に何も変更していないため、正しく動作しているように見えます(最初の画像がmargin-topゼロですか?) 。

の 2 番目のパラメーターとして「デフォルト」を渡していることが問題である可能性があると思います$.animate。のドキュメントを調べた$.animateところ、そのパラメーター (パラメーター) の有効なオプションとして「デフォルト」がどこにも言及されていませんduration。代わりに、fast、slow、または何らかの数値に設定してみてください。

于 2013-02-24T22:48:07.793 に答える
0

この行：

        $(this).css('marginTop');

何もしません。おそらく次のような意味です。

if(this.id == "left4") {
    margin_top = '261px';
} else if ( this.id == "left7") {
    margin_top = '511px';
} else {
    margin_top = $(this).css('marginTop');
}

そうすれば、css プロパティを保存できます。ifまた、最初のシリーズの を2 番目のシリーズで上書きしないように、必要な if/else シリーズは 1 つだけですelse。

于 2013-02-24T21:51:18.953 に答える
0

多分問題はifにあります：私はそれが次のようなものであるべきだと思います

if($(this).attr('id') == "left4") {
    margin_top = '105px';
} else if($(this).attr('id') == "left7") {
    margin_top = '353px';
} else {
    margin_top = $(this).css('marginTop');
}
于 2013-02-24T21:52:11.977 に答える