问题
i use this code for change the size and the opacity of div and create the "zoom-effect" :
$("#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);
});
Why on Firefox don't work properly? does not create the zoom effect but it does disappear the div5 and appear other div but it does not properly.
While Chrome on the same code leads to a better result and the result I want.
No console error.
EXAMPLE: http://jsfiddle.net/JshKH/
Thanks.
回答1:
zoom is a proprietary css-property, it does not work in Firefox. Webkit supports it, so apparently it works in Safari, Chrome and IE but not in Firefox. sitepoint reference
There are FF-rules such as
-moz-transform: scale(2);
but I believe it requires the correct combination of rules to achieve the equivalent to zoom across all browsers.
Alternatively, you might replace zoom with perhaps, changes to the font-size or weight, and/or padding.
来源：https://stackoverflow.com/questions/17459719/problems-with-firefox-and-jquery