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 回答