jQuery-Schieberegler funktioniert nicht in FireFox

Question

Ich habe einen jQuery-Schieberegler erstellt, der in Safari, Chrome und EI funktioniert, aber die Animation in FF 3.6.28 überhaupt nicht darstellt.

Ich verwende zwei Bits Code. Eine für das Laden der Seite und eine für die Vorschaubilder. Die erste ist:

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

Der Code für Sie auf das Miniaturbild:

$(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") 
    }); 

Hier ist die CSS ist:

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

und hier ist die Marke nach oben:

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

Ist das ein Problem mit FF? Gibt es eine Lösung? Oder muss mein Code repariert werden?

Answer 1

Das Problem kann in der Tatsache liegen, dass Sie eine Ganzzahl an Ihre animate Funktion für den Parameter right senden. Sie müssen px am Ende dieser Ganzzahl hinzufügen, damit es browserübergreifend kompatibel ist.

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