0

我正在设计一个网站，其中前端导航涉及将整个页面的内容向左、向右和向下滑动。这在除 IE7 之外的所有内容中都可以正常工作。最奇怪的是，三个动画中的一个可以完美运行（就好像它是现代浏览器一样），但由于某种原因，其他两个功能无法正常工作。

这是有效的功能：

jQuery('#block-block-16 p').live('click',function(){ FadeHeaderFooter();

var $structure = jQuery('#structure');
var $colorBlock = jQuery('#news-color-block');  
var colorHeight = parseInt($colorBlock.css('margin-top'));
var w = jQuery(window).width(); //major difference
var slideHeight = FindSweetSpot('#news-color-block');

$structure.animate({ marginLeft: (w+2000) + "px" }, //math is different
                        1500, function(){
    $colorBlock.animate({ marginTop: (colorHeight - slideHeight) + "px" }, 
                        1000, function(){
        window.open (fakeurl.com','_self',false);
    });
});

});

这是没有的：

jQuery('#block-block-18 p').live('click',function(){ FadeHeaderFooter();

var $structure = jQuery('#structure');
var $colorBlock = jQuery('#about-color-block');
var colorHeight = parseInt($colorBlock.css('margin-top'));
var w = jQuery("#main-content").width();
var slideHeight = FindSweetSpot('#about-color-block');


$structure.animate({ marginLeft: ((w/2)*-1) + "px" }, //
                        1500, function(){
    $colorBlock.animate({ marginTop: (colorHeight - slideHeight) + "px" }, 
                        1000, function(){
        window.open ('fakeurl.com','_self',false);
    });
});

});

两者几乎相同。您会看到变量 w 是用不同的元素声明的，但这似乎不是问题（并且适用于所有其他浏览器）。问题似乎是我在哪里计算新的 marginLeft 将是什么。

即这个有效：marginLeft: (w+2000) + "px"

这个没有：marginLeft: ((w*.5)*-1) + "px"

第一个将页面向右滑动，第二个试图将所有内容向左滑动。

似乎 IE7 无法向左滑动东西？我认为这可能是乘以-1，所以我尝试了这个：

var dist = (w*.5); var 幻灯片 = 距离 - 距离 - 距离；

徒劳无功。任何帮助将不胜感激，谢谢！

4

1 回答 1

1

我发现了问题！定义为 w （ var w = jQuery("#main-content").width(); ）的元素具有“相对”的位置值，通过将该值切换为“绝对”，我能够获得所需的全面发挥作用。

学过的知识：

在 IE7 中使用 jQuery.animate() 时，请确保父元素绝对定位。这适用于您正在制作动画的孩子也绝对定位时。

于 2012-09-14T15:24:51.617 回答