JQuery Animation doesn't work in Internet Explorer

Question

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 Inte

Answer 1

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>

Answer 2

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

I did three things:

1. I made it look nice
2. I ended the statements with ;
3. 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"
    });
});