显示在IE9中不起作用的隐藏元素(可见)
显示在IE9中不起作用的隐藏元素(可见)
提问于 2012-08-06 16:39:40
我创建了一个旋转iPhone的动画，只有在IE9中才有问题，当我单击视频时，iPhone会水平旋转，当我单击iPhone按钮时，它会返回垂直位置。然后，当iPhone在垂直位置返回时，iPhone中的元素消失，而元素应该重新出现。
此字符串负责隐藏元素：
$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).fadeTo(100,0,function(){$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).hide(100)});http://matteowebdesigner.com/test/yesimove/
有没有人能给我一些建议？
function iphoneAction(){
$('<div class="mask"></div>').prependTo(Iphone.iphone);
var
mask = Iphone.iphone.find('.mask'),
screen = Iphone.iphone.find('.screen'),
next = Iphone.iphone.find('.next'),
before = Iphone.iphone.find('.before'),
reflection = Iphone.iphone.find('.reflection');
mask.on('click', iPhoneHorizontal);
/*horizontal*/
function iPhoneHorizontal(){
if(Iphone.iphone.find('.videoActive').hasClass('video')){ /*control the class video*/
mask.off('click', iPhoneHorizontal);
$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).fadeTo(100,0,function(){$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).hide(100)});
Iphone.iphone.find('.ice').remove();
Iphone.iphone.css('zIndex','1');
//animate
if($.browser.msie){
Iphone.iphone.stop(true,true).animate({
backgroundPositionY:'-5500',
backgroundPositionX:'0'
},330,'movie',function(){
mask.addClass('maskVideo');
$('<div class="backTurn"></div>').prependTo(Iphone.iphone);
Iphone.iphone.find('.videoActive').children().clone().prependTo(mask);
Iphone.iphone.find('.backTurn').on('click',iPhoneVertical);
});
}
else {
Iphone.iphone.stop(true,true).animate({
backgroundPosition:'(0 -5500)'
},330,'movie',function(){
mask.addClass('maskVideo');
$('<div class="backTurn"></div>').prependTo(Iphone.iphone);
Iphone.iphone.find('.videoActive').children('video').clone().prependTo(mask);
Iphone.iphone.find('.backTurn').on('click',iPhoneVertical);
});
}
}
}
/*vertical*/
function iPhoneVertical(){
Iphone.iphone.find('.backTurn').remove();
Iphone.iphone.find('.maskVideo').children().remove();
mask.removeClass('maskVideo');
function iPhoneCreateElement(){
//ice
$('<div class="ice"></div><div class="ice"></div><div class="ice"></div>').insertAfter(Iphone.iphone.find('.next'));
var
ice = Iphone.iphone.find('.ice'),
ice01 = ice.eq(0),
ice02 = ice.eq(1),
ice03 = ice.eq(2);
ice02.css('background-position', '0 -486px');
ice03.css('background-position', '0 -972px');
ice.css('opacity','0');
Iphone.iceEffect();
$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).show(100,function(){$([before.get(0),next.get(0),reflection.get(0),screen.get(0)]).fadeTo(100,1)});
Iphone.iphone.css('zIndex','');
mask.on('click', iPhoneHorizontal);
}
//animate
if($.browser.msie){
Iphone.iphone.stop(true,true).animate({
backgroundPositionY:'0',
backgroundPositionX:'0'
},330,'movie',iPhoneCreateElement);
}
else {
Iphone.iphone.stop(true,true).animate({
backgroundPosition:'(0 0)'
},330,'movie',iPhoneCreateElement);
}
};
};回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-06 20:04:12
我用下面的代码解决了重写代码的问题：
//hide
$(before).fadeTo(100,0,function(){$(this).hide(100);});
$(next).fadeTo(100,0,function(){$(this).hide(100);});
$(reflection).fadeTo(100,0,function(){$(this).hide(100);});
$(screen).hide(100);
//show
$(before).fadeTo(100,1,function(){$(this).show(100);});
$(next).fadeTo(100,1,function(){$(this).show(100);});
$(reflection).fadeTo(100,1,function(){$(this).show(100);});
$(screen).show();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11824966
复制相关文章
相似问题
腾讯云开发者
