Question

此卡假设为卡片翻转设置动画。它适用于除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);
    });
});

Answer 1

使用jQuery Lint，查看Firebug打开时出现的错误。在jQuery之后立即将它包含在您的标记中，如下所示：

<script src="jquery.js"></script>
<script src="jquery.lint.js"></script>

Jquery只能在我的代码中使用firebug（没有console.log（））

1 个答案: