Geek Answers Handbook

JQuery.animate () only works in Chrome

I am using the jQuery.animate () function to move a div in a container div. This works without problems in Google Chrome, but when I try to use Firefox or IE, divs turn into a distorted mess and don't actually slip. I'm new to Javascript and not aware of browser compatibility methods, can anyone point me in the right direction? Here is the relevant code:

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>

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; }

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 on because I'm not sure that he is against the rules. Any help is much appreciated!

+4
source share
2 answers

Missing event argument from click handler

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

It should be

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

Demo .

+5
source

I can not test IE itself, but this fixes Firefox, and returnValue should fix IE. CSSDeck test - I cannot 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')); ...
+1
source

More articles:


All Articles