CODEWITHSUNDEEP
jqueryinternet-explorergoogle-chromecross-browserjquery-animate
jstacks
jstacks

Reputation: 2437

Issues with .animate() in Chrome (fine in Firefox and IE)

I am simply trying to slide the main container (and everything within it) out of the way to show a navigation menu beneath when you click the navigate button. When you click it again, the container div moves back over top the navigation menu. It's UI that's gotten popular on mobile designs.

Anyway, I have it working just fine in Firefox and IE. Unfortunately, the same cannot be said for Chrome.

http://jsfiddle.net/aXsWz/28/

$(document).ready(function() {

$('div#navNavigate').click(function(){
        $('div#navNavigateHide').show()
        $('div#navNavigate').hide()
        $('div#container').animate({'left':'+=120'});
});  

$('div#navNavigateHide').click(function(){
        $('div#navNavigate').show()
        $('div#navNavigateHide').hide()
        $('div#container').animate({'left':'-=120'});
    });
});

So, the issue is that the "nav" and "container" divs aren't moving together.

Any help appreciated. Thanks.

Upvotes: 0

Views: 317

Answers (1)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

Update::

You have a fixed position rule on the navigation. If you change it to absolute, the animation will run properly: 

#nav {
  background:#222222;
  width:240px;
  height:45px;
  margin:0 auto;
  position:absolute;  <-- This was previously "fixed"
  top:0;
  z-index:10000;
}

Working example: http://jsfiddle.net/aXsWz/30/

Take a look at this article to see the difference between fixed and absolute positioning: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

The problem is that you've nested your toggles inside of the container that gets moved around. If you refactor them to live outside of that container, it works just fine (although you can make quite a few improvements to this js pattern...).

Working example: http://jsfiddle.net/aXsWz/29/

<div id='nav'>
    <div id='navNavigate'>
    </div>
    <div id='navNavigateHide'>
    </div>
</div>    

<div id='container'></div>

Upvotes: 1

Related Questions