Firefox和jQuery的问题

时间:2013-07-03 23:27:39

标签: jquery zoom effect

我使用此代码更改div的大小和不透明度并创建“缩放效果”:

$("#div5").click(function () {

                                        $('#wrap').animate({
                                            'opacity' : 0,
                                            'zoom': 1.08,

                                        },500);

                                            $('#wrap').hide(500,function(){ 

                                                    $('#dBenefits').show();

                                                    $('#dBenefits').animate({
                                                        'opacity' : +10,
                                                        'zoom': 1.08,

                                                    },500);

                                             });

                                        });



                                        $('#back').click(function (){

                                            $('#dBenefits').animate({
                                            'opacity' : 0,
                                            'zoom': 1,

                                        },500);

                                            $('#dBenefits').hide(500, function (){

                                                $('#wrap').show({'opacity' : 0,},500);

                                                $('#wrap').animate({
                                                    'opacity' : +10,
                                                    'zoom': 1,


                                                },500);

                                            });

为什么在Firefox上无法正常工作? 不会创建缩放效果,但它会消失div5并显示其他div,但它不正确。

虽然相同代码上的Chrome会带来更好的结果和我想要的结果。

没有控制台错误。

示例:http://jsfiddle.net/JshKH/

感谢。

1 个答案:

答案 0 :(得分:0)

zoom是一个专有的css属性,它在Firefox中不起作用。 Webkit支持它,因此显然它适用于Safari,Chrome和IE,但不适用于Firefox。 sitepoint reference

有FF规则,例如

-moz-transform: scale(2);

但我认为它需要正确的规则组合才能在所有浏览器中实现等效zoom

或者,您可以替换缩放,或者更改字体大小或重量,和/或填充。