Question

我创建了一个旋转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);
        }
    };
};

Answer 1

我解决了用以下方法重写代码的问题：

        //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();

显示隐藏元素（可见）在IE9中不起作用

1 个答案: