0

Safari、Chrome、および EI で正常に動作する jQuery スライダーを作成しましたが、FF 3.6.28 ではアニメーションがまったくレンダリングされません。

2 ビットのコードを使用しています。1 つはページの読み込み時、もう 1 つはサムネイル用です。1 つ目は次のとおりです。

$(document).ready(function()
{$("#hidden-1st").delay(1000).animate({ right: 10, width: '508px', 
            height: '286px' }, { duration: 1000, easing: 'easeInQuint'})
  });

サムネイルをクリックするためのコード:

$(document).ready(function () {
    $("#Thumb1").click(function () {
        $("#hidden-1st").css({ right: -508, width: '508px', height: '286px' })
                        .html('<iframe src="http://player.vimeo.com/video/38581363?byline=0&amp;portrait=0&amp;autoplay=1" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>')
                        .delay(1000)
                        .animate({ right: 10, width: '508px', height: '286px' }, { duration: 1000, easing: 'jswing'});
        $(".innerleftPlayer p").html("A personal profile of entrepreneur Mark Evans.<br/><br/> dur: 2:51")
    });

CSSは次のとおりです。

#leftsidePlayer {
background-image:url(../images/playerLeftSideBG.jpg);
float:left;
height:236px;
width:158px;
position:relative;
padding: 25px;
}
.innerleftPlayer{
height: 236px;
width: 158px;
position:absolute;
display: table;
    }
.innerleftPlayer p{
display: table-cell;
vertical-align: middle;
text-align: left;
font-family:Cuprum, sans-serif;
font-size:13pt;
color:#5f5f60;
    }
#rightsidePlayer {
background-color:#999;
float:left;
height:286px;
width:508px;
overflow: hidden;
}

#hidden-1st {
height:286px;
width:508px;
position:absolute;
right: -508px;
}

.inline {
float:left;
margin-right:8px;
}

#Thumb1,#Thumb2,#Thumb3,#Thumb4 {
float:left;
height:103px;
width:184px;
position:relative;
margin-right:30px;
}

.thumbsWrap {
width:826px;
height:103px;
background-image:url(../images/bannerBg.jpg);
position:relative;
padding:23px 57px;
}

ここにマークアップがあります：

<div id="videoBox">
                <!--Player Begin-->
                <div id="outterGPlayerBox">
                    <div id="GPlayerBox">
                        <div id="leftsidePlayer">
                            <div class="innerleftPlayer">
                       <p>A personal profile of entrepreneur Mark Evans.<br/><br/> dur: 2:51</p>
                            </div>
                        </div><!--end of leftsidePlayer-->
                        <div id="rightsidePlayer">
                        <div id="hidden-1st"><iframe src="http://player.vimeo.com/video/38581363?byline=0&amp;portrait=0" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>  
                      </div><!--end of rightsidePlayer-->
                  </div><!--end of GPlayer Box-->   
                </div><!--end of outterGPlayerBox-->   
                <!--Player End-->
            </div><!--end of videoBox-->

これはFFの問題ですか？修正はありますか？または、コードを修正する必要がありますか?

4

1 に答える 1

0

animate問題は、パラメーターの関数に整数を送信しているという事実にある可能性がありrightます。pxブラウザ間の互換性を持たせるには、その整数の末尾に追加する必要があります。

$("#hidden-1st").delay(1000).animate({ right: '10px', width: '508px', height: '286px' }, { duration: 1000, easing: 'easeInQuint'});
于 2012-04-05T16:14:09.680 に答える