0

我制作了一个在 Safari、Chrome 和 EI 中运行良好的 jQuery 滑块，但它在 FF 3.6.28 中根本不渲染动画。

我正在使用两位代码。一个用于页面加载时，一个用于缩略图。第一个是：

$(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 回答