FireFoxでjQueryスライダが動作しない

Question

Safari、Chrome、EIでうまく動作するjQueryスライダを作成しましたが、FF 3.6.28ではアニメーションをまったく表示しません。

私は2ビットのコードを使用しています。 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です：

<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--> 

：

#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; 
} 

、ここでは、マークアップです

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

Answer 1

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

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