Jquery Internet Explorer compatibility (toggle and animate)_问答_开发者

Jquery Internet Explorer compatibility (toggle and animate)

开发者 https://www.devze.com 2023-01-12 22:48 出处：网络

Why this small piece of jQuery code is not working on Internet Explorer? IT works fine in all the Webkit browsers.

$('#logo').toggle(function() {
    $('#about').animate({'top': '-400px'},'slow');
}, function() {
    $('#about').animate({'top': '0px'},'slow');
});

CSS:

#logo开发者_JS百科 {
    margin:-55px auto 0 auto;
    cursor:pointer;
}

#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}

HTML

<div id="header">
  <div id="about">                  
    <p>test</p>
    <img id="logo2" src="assets/img/logokleinhover.png" alt="Logo" />
  </div>
</div>

If you place your code in a $(document).ready() at the bottom of your html page. It reduces a lot of the issues that i have with js in IE.

Like Jack said, its best to put your javascript after the HTML it effects.

<script>
$.ready(function(){ 
    $('#logo').toggle(function() {
        $('#about').animate({'top': '-400px'},'slow');
    }, function() {
        $('#about').animate({'top': '0px'},'slow');
    }); 
});
</script>

As Nalum says any image less than 400px in height will disappear and be unrecoverable. But this piece of code works in IE 7 and IE 8 for me:

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
#logo {
    margin:-55px auto 0 auto;
    cursor:pointer;
}
#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}
</style>
</head>
<body>
<div id="header">
  <div id="about">
    <p>test</p>
    <img id="logo" src="test.bmp" alt="Logo" />
  </div>
</div>
<script language='javascript'>
    $('#logo').toggle(
    function(){
        $('#about').animate({'top': '-400px'},'slow');
    },
    function(){
        $('#about').animate({'top': '0px'},'slow');
    });
</script></body></html>

On thing to note for some reason the script has to be below the html it will influence. I noticed this is true in the examples and when I try to put the script anywhere above the tags they influence it won't work. There are some comments that it doesn't quite work for IE7 but in this example that was not the case for me.