JQuery 动画在 Internet Explorer 中不起作用

Question

我在让这个 JQuery 在 Internet Explorer 中运行时遇到了一些麻烦，它在 FF、WebKit 等中运行良好，可以向上滑动、弹跳和回落到原位，但在 Internet Explorer 中它什么也不做，按钮不会'不起作用，页面加载时内容永远不会向上滑动。真的很奇怪，我在网站的早期设计中有一个元素淡出，它在 IE 中不起作用，但在其他所有东西中都起作用......

<script>

$(document).ready(function(){
           $('#homecontent').delay("750").animate({ marginTop: "-15px" }, 1500).animate({ marginTop: "5px" }, 500);
})

</script>


<script>
$("#shop").click(function(){
           $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
           window.location.href = "http://www.jamiedurham.co.uk/shop/","shop"      
  });
})
$("#blog").click(function(){
           $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
           window.location.href = "http://www.jamiedurham.co.uk/blog/","blog"      
  });
})
</script>


<div id="homecontent" style="width:1000px; margin-left:20px; margin-right:20px; position:absolute; margin-top:1500px; line-height:19px;"></div>

<table style="margin-top:70px;">
    <tr style="height:50px; width:738px;">
         <td style="width:242px;"><a href="http://www.jamiedurham.co.uk/" ><img src="http://www.jamiedurham.co.uk/pics/homehover.gif" alt="home" name="home" id="home"></a></td>
         <td style="width:242px;"><a href="http://www.jamiedurham.co.uk/shop" id="shop" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shop','','http://www.jamiedurham.co.uk/pics/partnershover.gif',1)"><img src="http://www.jamiedurham.co.uk/pics/shop.gif" alt="shop" name="shop" id="shop"></a></td>
         <td style="width:242px;"><a id="blog" href="http://www.jamiedurham.co.uk/blog" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','http://www.jamiedurham.co.uk/pics/bloghover.gif',1)"><img src="http://www.jamiedurham.co.uk/pics/blog.gif" alt="blog" name="blog" id="blog"></a></td>     
    </tr>
</table>

Answer 1

http://jsfiddle.net/koolvin/MXwXA/5/ 这个已经在所有 IE 版本中测试过了，它可以在 IE6+ 中运行

我做了三件事：

1. 我让它看起来不错
2. 我以;结束了这些陈述
3. 我添加了 e.preventDefault() 以确保您的 javascript 按预期工作。

原来是这样的：

$(document).ready(function() {
    $('#homecontent').delay("750").animate({
        marginTop: "-15px"
    }, 1500).animate({
        marginTop: "5px"
    }, 500);
});
$("#shop").click(function(e) {
    e.preventDefault();
    $('#homecontent').animate({
        marginTop: "1500px"
    }, 1500).delay("1500", function() {
        window.location.href = "http://www.jamiedurham.co.uk/shop/", "shop"
    });
});
$("#blog").click(function(e) {
    e.preventDefault();
    $('#homecontent').animate({
        marginTop: "1500px"
    }, 1500).delay("1500", function() {
        window.location.href = "http://www.jamiedurham.co.uk/blog/", "blog"
    });
});

Answer 2

我认为您的 HTML 中有一些错误。您已经在 a 和 img 标签上指定了 id="shop" 和 id="blog"。从 img 标签中删除它。

试试这个新的 Javascript 代码。点击动作没有被执行，通过添加 event.preventDefault()，标准的点击事件将不会执行，用户只会在 window.location 发生时被重定向。

    <script>
$(document).ready(function(){
   $('#homecontent').delay("750").animate({ marginTop: "-15px" }, 1500).animate({ marginTop: "5px" }, 500);

$("#shop").click(function(event){
        event.preventDefault();
       $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
            window.location.href = "http://www.jamiedurham.co.uk/shop/","shop"
        });
});
$("#blog").click(function(event){
    event.preventDefault();
   $('#homecontent').animate({ marginTop: "1500px" }, 1500).delay("1500", function(){
       window.location.href = "http://www.jamiedurham.co.uk/blog/","blog"
    });
});
});
</script>