Question

我正在设计一个网站，其中前导航涉及向左，向右和向下滑动整个页面的内容。这在除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 slide = dist - dist - dist;

无济于事。任何帮助将不胜感激，谢谢！

Answer 1

我发现了这个问题！定义为w的元素（var w = jQuery（“＃main-content”）。width（）;）的位置值为“relative”，通过将该值切换为“absolute”，我得到了所需的全面发挥作用。

获得的经验：

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

IE7 jQuery.animate（）无法将所有内容向左滑动

1 个答案: