jQuery animation not working in Internet Explorer

Question

I am coding my website, and a friend of mine was helping me. This code does not work on IE 10 (Windows 7). I even tried the legacy modes and to no avail. Upon clicking on "services" for example, this code would work on FF or Chrome. But, not on IE. Can someone help me fix this code so it would also work on IE?

$('#services-fr-2').on('click',function(){

    $(".clientsFr").hide();
    $('.servicesFr').fadeToggle();
    $('#green-pouch-fr').animate({
        'top':'450px'//,
        //'height':'450'
    });

});

EDIT: Here is the fiddle as requested.

http://jsfiddle.net/dVMT9/5/

Semicolon at the end of the `on()` function? Sometimes IE can be picky about stuff like this. — Jace Cotton, Oct 20 '13 at 03:56
Break it down line-by-line until you figure it out. Get rid of everything in the click callback. If it works, add those in one at a time until you break it. I highly doubt the problem is in the code you're showing here. — Brad, Oct 20 '13 at 03:57
@MidevilChaos can you create a jsfiddle? That way all of us can try debugging the code. — Neeraj, Oct 20 '13 at 04:00
Please describe what the actual error is - "this code does not work on IE 10" isn't descriptive enough to actually provide a good answer. What about it doesn't work? Do you get an error? This is probably a good time to introduce you to http://www.jslint.com/ as well. — Goyuix, Oct 20 '13 at 04:17
Goyuix there is no error. JSlint picks up nothing except the regular $ error in relation to jslint (as it always does). All that should happen, does not happen. I tried every line one by one. But the JS code refuses to execute on IE. My rectangle should go down and adjust to the amount of text (in the fiddle the text won't appear, which is fine I suppose, since there are not separate html files to be used). — Midevil Chaos, Oct 20 '13 at 04:35
For those interested, check the fiddle in the edited post :) — Midevil Chaos, Oct 20 '13 at 04:36
Open developer tools on IE using F12 and see if the page is being rendered in quirks mode or some older compatibility — yuvi, Oct 20 '13 at 06:30
I can't see any problem with [the fiddle](http://jsfiddle.net/5TJWY/) in IE10 (it works in a same way as in FF), just assign a jQuery library to your code... — Teemu, Oct 20 '13 at 18:41
@Teemu. If it works on FF and Chrome on my side, does that not indicate that I am using a library? Of course I am, although I took your advice and re-used it by changing library versions. Alas, to no avail. I even tried the jquery one itself. — Midevil Chaos, Oct 20 '13 at 23:05
@MidevilChaos There's no jQuery library attached in the fiddle you've linked... — Teemu, Oct 21 '13 at 04:01
-_- you could attach one in the fiddle? Oh. In any case, I always use the Google one (been taught that Google has a vast one). I use the latest. — Midevil Chaos, Oct 21 '13 at 04:32

score 0 · Answer 1 · answered Oct 20 '13 at 03:55

0

You are missing brackets.

$('#services-fr-2').on('click',function(){  
        $( ".clientsFr" ).hide();
        $('.servicesFr').fadeToggle();
        $('#green-pouch-fr').animate({
            'top':'450px'//,
            //'height':'450'
        })
});

answered Oct 20 '13 at 03:55

Neeraj

8,408
8
41
69

IE is usually picky about errors. Chrome/FF probably fixes them on the fly. I guess. – Neeraj Oct 20 '13 at 03:58
1

No, I simply forgot to paste the brackets. They are already there. – Midevil Chaos Oct 20 '13 at 03:59
2

That isn't true at all. Chrome/FF fixes nothing, and are just as picky, syntax wise. – Brad Oct 20 '13 at 03:59

score 0 · Answer 2 · answered Oct 20 '13 at 04:08

0

Your problem is the comma after 'top':'450px'

The comma would be fine if the next line wouldn't be commented out. Remove the comma and IE will be fine.

answered Oct 20 '13 at 04:08

Steve

8,609
6
40
54

I commented the comma. I still removed it just now though just in case (IE might have been dumb here? But no, it wasn't). – Midevil Chaos Oct 20 '13 at 04:23

score 0 · Answer 3 · answered Oct 20 '13 at 07:21

0

Could it be px in 'top':'450px', I once had a issue with px, just try removing them

answered Oct 20 '13 at 07:21

Nuwan Dammika

587
9
20

1

I wish it was that! How I wish it would be that simple. But sadly it isn't. Thank you for the advice though, will be useful in the future for certain. – Midevil Chaos Oct 20 '13 at 23:13

score 0 · Answer 4 · answered Jul 01 '14 at 11:52

0

I faced same problem in IE9. I tried top without quotes and it worked.

answered Jul 01 '14 at 11:52

Ashok

1

1

This is should be in comment section. This is not good answer. – Yagnesh Agola Jul 01 '14 at 12:14

jQuery animation not working in Internet Explorer

4 Answers4

Linked