JQuery Animation не работает в 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. Вы указали id = "shop" и id = "blog" в тегах a и img. Удалите его из тегов 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>