JQuery .animate() only works in Chrome

Question

I am using the JQuery .animate() function to slide divs in a container div. This works without issue in Google Chrome, but when I try in either Firefox or IE, the divs become a garbled mess and don't actually slide. I'm new to Javascript and ignorant in the ways of browser compatibility, can anyone point me in the right direction? Here is the relevant code:

The HTML

<div id="slider">
  <div id="main" class="content">
  </div>

  <div id="projects" class="content">
  </div>

  <div id="about" class="content">
  </div>

  <div id="contact" class="content">
  </div>
</div>

The CSS

#slider {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

#main {
  background-color: red;
  width: inherit;
  height: inherit;
  position: absolute;
}

#projects {
  background-color: blue;
  width: inherit;
  height: inherit;
  position: absolute;
}

#about {
  background-color: yellow;
  width: inherit;
  height: inherit;
  position: absolute;
}

#contact {
  background-color: green;
  width: inherit;
  height: inherit;
  position: absolute;
}

.content {
  left: 0;
  top: 0;
}

The JavaScript

$(document).ready(function() {

var contentWidth = '100px';

for( var i=0; i < 2; i++) {
  $('.gallery' + (i + 1)).colorbox({ opacity:0.5 , rel:'gallery' + (i+1)});
}

$('.content').css({
  position: 'absolute',
  left: contentWidth
});

$('#main').addClass('visible');
document.getElementById('main').style.left = "0";

$("li a").click(function () {
  event.preventDefault();
  var $blockID = $( $(this).attr('href') );

  if ($blockID.hasClass('visible')) { return; }

  $('.content.visible')
    .removeClass('visible')
    .animate({ left: '-=100px' }, {  
      duration: 'slow',
      complete: function () {
        $(this).css('left', '100px');
      }
    }
 );

$blockID
  .addClass('visible')
  .animate({ left: 0 }, {duration: 'slow'});
});

});

JSFiddle: http://jsfiddle.net/bwvVZ/

I can also provide a link to the site in question, although I will hold off because I am not sure if its against the rules. Any help is much appreciated!

score 5 · Accepted Answer · answered Apr 18 '13 at 01:56

5

You are missing the event argument from your click handler

$("li a").click(function(){ 
    event.preventDefault();
    //...
});

It should be

$("li a").click(function (event){
    event.preventDefault();
    //...
});

DEMO.

answered Apr 18 '13 at 01:56

The Alpha

143,660
29
287
307

Hey Sheikh, thanks for answering, adding (event) worked well. It's odd that Chrome worked at all w/o it. Anyway, thanks again! – Max Apr 18 '13 at 02:12

score 1 · Answer 2 · answered Apr 18 '13 at 02:03

1

Can't test in IE myself but this fixes Firefox and the returnValue should fix IE. CSSDeck Test - I can't access jsfiddle from my current location.

$("li a").click(function (event){
    event.returnValue = false; //ie
    if(event.preventDefault) //prevents error if not found
        event.preventDefault();

    var $blockID = $($(this).attr('href'));

    ...

answered Apr 18 '13 at 02:03

AmbrosiaDevelopments

2,576
21
28

Hey Abrosia, thanks, adding (event) helped! I can only test IE on a windows XP VM, but it looks like it works with just (event) added. does returnValue help older version of IE? Thanks again! – Max Apr 18 '13 at 02:24
Microsft website just claims it is legacy code for older versions of IE and doesn't list what it deems to be 'older versions'. I suppose this could be anything not in the support cycle which would be versions less than 8. Also just a side note, you need to use the name 'event' and not something like 'e' otherwise the global event object won't be used in IE8. – AmbrosiaDevelopments Apr 18 '13 at 04:03

JQuery .animate() only works in Chrome

2 Answers2