JQuery Animation doesn't work in Internet Explorer

问题

I'm having a bit of trouble making this JQuery work in Internet Explorer, it works beautifully in FF, WebKit, etc, sliding up, bouncing and falling back into place, but in Internet Explorer it does nothing, the buttons don't work and the content never slides up upon page load. It's really weird, I had an element fade out in an earlier design of my site and it didn't work in IE but worked in everything else...

<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>

回答1:

http://jsfiddle.net/koolvin/MXwXA/5/ This has been tested in all IE versions, it works in IE6+

I did three things:

I made it look nice
I ended the statements with ;
I added e.preventDefault() in order to ensure your javascript was working as expected.

It amounted to this:

$(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"
    });
});

回答2:

I think you have some errors in your HTML. You've specified the id="shop" and id="blog" on both the a and img tags. Remove it from the img tags.

And try this new Javascript code. The click actions weren't being executed and by adding the event.preventDefault(), the standard click event won't execute and the user will only be redirected once the window.location happens.

    <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>

来源：https://stackoverflow.com/questions/7797924/jquery-animation-doesnt-work-in-internet-explorer

标签

jquery

internet-explorer

animation

fade

slide