Question

I created an animation that rotates the iPhone, I have a problem only in IE9, when I click on a video, the iPhone rotates in horizonal and when I click the iPhone button, it returns to the vertical position. Then When the iPhone returns in vertical position the elements in the iPhone disappears while the elements should reappear.

This string takes care of hiding elements:

$([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/

Please could anyone give me some suggestions?

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

I resolved the problems rewriting the code with this:

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