0

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);
        }
    };
};
4

1 に答える 1

0

これでコードを書き直す問題を解決しました：

        //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();
于 2012-08-06T12:04:11.620 に答える