0

このカードは、カードフリップをアニメーション化することを想定しています。FFを除くすべてのブラウザで動作します。IE8でも動作します。Firebugが開いている場合にのみFirefoxで動作します。console.log（）が含まれていないので、なぜ機能しないのか知りたいです。これが私のコードです。あなたの助けに感謝します。

var margin = $("#image1").width() / 2;
var width = $("#image1").width();
var height = $("#image1").height();
var margin = $("#image3").width() / 2;
var width = $("#image3").width();
var height = $("#image3").height();
var margin = $("#image5").width() / 2;
var width = $("#image5").width();
var height = $("#image5").height();

$(document).ready(function() {
    $("#image2").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px',
        opacity: '0.5'
    });
    $("#reflection2").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px'
    });
    $("#reveal").click(function() {
        $("#image1").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image2").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });
    $("#image2").click(function() {
        $("#image2").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image1").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });

    $("#image4").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px',
        opacity: '0.5'
    });
    $("#reflection2").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px'
    });
    $("#reveal").click(function() {
        $("#image3").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image4").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });
    $("#image4").click(function() {
        $("#image4").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image3").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });

    $("#image6").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px',
        opacity: '0.5'
    });
    $("#reflection2").stop().css({
        width: '0px',
        height: '' + height + 'px',
        marginLeft: '' + margin + 'px'
    });
    $("#reveal").click(function() {
        $("#image5").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image6").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });
    $("#image6").click(function() {
        $("#image6").stop().animate({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        }, {
            duration: 500
        });
        window.setTimeout(function() {
            $("#image5").stop().animate({
                width: '' + width + 'px',
                height: '' + height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, {
                duration: 500
            });
        }, 500);
    });
});
4

1 に答える 1

0

jQuery Lintを使用して、Firebug をオンにした場合に表示されるエラーを確認します。次のように、jQuery の直後にマークアップに含めます。

<script src="jquery.js"></script>
<script src="jquery.lint.js"></script>
于 2012-08-28T07:12:25.127 に答える