jQuery代码在Safari中工作，但在Firefox中不工作_Jquery_Css_Firefox_Animation_Safari

jQuery代码在Safari中工作，但在Firefox中不工作

jquery css firefox animation safari

jQuery代码在Safari中工作，但在Firefox中不工作,jquery,css,firefox,animation,safari,Jquery,Css,Firefox,Animation,Safari,我正在尝试使用jQuery和CSS的混合，使沙漏中的沙子在向下滚动页面时看起来像是流动的。我基本上有两个“sand”图像，并使用jQuery在用户滚动时更改其容器的高度  <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <!-- Handle Hourglass Scrolling --&

我正在尝试使用jQuery和CSS的混合，使沙漏中的沙子在向下滚动页面时看起来像是流动的。我基本上有两个“sand”图像，并使用jQuery在用户滚动时更改其容器的高度

<!-- Load jQuery -->
  <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- Handle Hourglass Scrolling -->
  <script type="text/javascript" charset="utf-8">
   $(document).ready(function(){

    // Set value of topStart and bottomStart to equal to y-position of the equivilent divs
    var topStart = parseInt($('#top-sand').css('top'));
    var bottomStart = parseInt($('#bottom-sand').css('top'));

    // Calculate the maximum height of the sand relative to the window size
    var sandHeight = $(window).height()*0.22;

    // setValues sets positions based on window size
    function setValues() {
     topStart = parseInt($('#top-sand').css('top'));
     bottomStart = parseInt($('#bottom-sand').css('top'));
     sandHeight = $(window).height()*0.22;
     var hourglassWidth = $('#hourglass #outline img').css('width');
     var leftMargin = $(window).width()*0.5+ 320;

     $('#top-sand').height(22+"%");
     $('#top-sand img').height(sandHeight)
     $('#bottom-sand img').height(sandHeight)
     $('#hourglass').css({left:leftMargin+"px"})
     $('#trace').text(hourglassWidth)


     // contentMarginLeft = $('#hourglass #outline').width();
     //  $('#content').text(contentMarginLeft);
     // css({"margin-left": contentMarginLeft + "px"});
    };

    setValues();

    // This listens for a window scroll event and then handles the height and position of the sand in the Hourglass
       $(window).scroll(function () {

     // Calculating the position of the scrollbar
     var doc = $("body"), 
         scrollPosition = $("body").scrollTop(),
         pageSize = $("body").height(),
      windowSize = $(window).height(),
      fullScroll = pageSize - windowSize;
         percentageScrolled = (scrollPosition / fullScroll);

     // Calculating the Y-positions of the two sand piles
     var topPosition = topStart+(22*percentageScrolled);
     var bottomPosition = bottomStart-(22*percentageScrolled);

     // Updating the sand piles
          $('#top-sand').height(22-(22*percentageScrolled)+"%")
           .css({top: topPosition+"%"});
      $('#bottom-sand').height(22*percentageScrolled+"%")
          .css({top:bottomPosition+"%"});

       });

    // This listens for a window resize event and then reconfigures the layout
    $(window).bind('resize', function() {
     // Reconfigure layout
    });

     });
  </script>


$（文档）.ready（函数（）{
//将topStart和bottomStart的值设置为等于等效div的y位置
var topStart=parseInt（$（'#top sand'）.css（'top'））；
var bottomStart=parseInt（$（#bottomsand'）.css（'top'）；
//计算相对于窗口大小的沙子的最大高度
var sandHeight=$（窗口）.height（）*0.22；
//setValues根据窗口大小设置位置
函数setValues（）{
topStart=parseInt（$（'#top sand'）.css（'top'））；
bottomStart=parseInt（$（#bottomsand'）.css（'top'））；
沙地高度=$（窗口）.height（）*0.22；
var hourglassWidth=$（'#hourglass#outline img'）.css（'width'）；
var leftMargin=$（窗口）.width（）*0.5+320；
$（'顶沙'）。高度（22+“%”；
$（“#顶部沙子img”）.高度（沙子高度）
$（“#底部沙子img”）.高度（沙子高度）
$（'#沙漏'）.css（{left:leftMargin+“px”}）
$（'#trace'）。文本（hourglassWidth）
//contentMarginLeft=$（“#沙漏#轮廓”）.width（）；
//$（'#content'）.text（contentMarginLeft）；
//css（{“左边距”：contentMarginLeft+“px”}）；
};
setValues（）；
//这将侦听窗口滚动事件，然后处理沙漏中沙子的高度和位置
$（窗口）。滚动（函数（）{
//计算滚动条的位置
var doc=$（“正文”），
scrollPosition=$（“正文”）.scrollTop（），
pageSize=$（“正文”）.height（），
windowSize=$（window）.height（），
fullScroll=页面大小-窗口大小；
百分比滚动=（滚动位置/完整滚动）；
//计算两个砂桩的Y位置
var topPosition=topStart+（22*百分比滚动）；
var bottomPosition=bottomStart-（22*百分比滚动）；
//更新沙堆
$（“#顶部沙子”）。高度（22-（22*百分比滚动）+“%”）
.css（{top:topPosition+“%”}）；
$（“#底沙”）。高度（22*percentageScrolled+“%”）
.css（{top:bottomPosition+“%”}）；
});
//这将侦听窗口调整大小事件，然后重新配置布局
$（窗口）.bind（'resize'，function（）{
//重新配置布局
});
});

它在Safari中工作得很好（虽然有时顶部图像的高度会发生变化，但它的y位置不会发生变化），但在Firefox中根本不起作用。你可以在这里看到这个网站

我对jQuery还很陌生，所以如果这是一个完全的noob错误，我深表歉意

提前感谢。

一些思考：

比起直接访问CSS值，更喜欢jQuery的定位方法。例如，使用

.offset（）

、

.position（）

等代替

.css（“top”）

。jQuery的方法在浏览器之间更具可移植性，并且将返回数字，而不是字符串。看

举个例子：

topStart=parseInt（$（'top sand'））.css（'top'））

如果必须通过CSS属性获取定位度量，请确保

（1）始终将其转换为数字，例如使用

parseInt（）

。JavaScript的字符串以隐晦的方式无声地转换（或不转换）为数字。始终明确表示您希望将什么视为数字

（2）考虑CSS值中有单位的情况，例如“100px”

示例：

var hourglassWidth=$（“#沙漏#轮廓img”）.css（'width'）

注意分数。在上面的

$（'#沙漏'）.css（{left:leftMargin+“px”}）

中，如果leftMargin不是整数（有小数点？），会发生什么

您的最佳选择可能是使用firebug单步操作，并在定位变量从一行到另一行变化时观察它们，并与您的预期进行比较

需要思考的一些想法：