CODEWITHSUNDEEP
javascriptjquerycss
Michael Rader
Michael Rader

Reputation: 5957

floating elements and using jQuery

I have a grid of logo's, 5 across and 4 down.

When a user clicks any logo, the logo is pushed into the grid and drops out of site. Everything runs pretty smoothly until one clicks the 5th logo. You can try it here:

logo hider

Any ideas on how to correct the jump in logos when you click the 5th one?

Here's my jQuery:

    $(document).ready(function() {

$('.imageShowing').click(function() {

        if ($(':animated').length) {
        return false;
                    }
  $(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  }, 100, function() {


    $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })

    $(this).animate({
    zIndex: '1',
    top: '480',
    opacity: '0'
  }, 1000, function() {  
  $(this).hide("fast");  
    // Animation complete.
  });
  });
});

}); //end document.ready

My CSS:

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 531px; margin: 0 auto; background: url(images/grid.png) no-repeat center; padding:39px 4px 39px 11px; position: relative; z-index: 5;}
#logoWrapper {position: absolute; top: 38px; left: 36px }
#logoWrapper img { float: left; padding: 0 7px 6px 0; margin:0; position: relative; z-index: 6;}

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}

The HTML is pretty straightforward. Thanks for the help.

Upvotes: 0

Views: 228

Answers (2)

riso
riso

Reputation: 232

in my chrome everything work well, but in IE 7 not working at all, in your first animate

$(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  }

delete the last ',' behind marginBottom, some browser may expect another parameter.

Upvotes: 0

idrumgood
idrumgood

Reputation: 4924

I would recommend making that an unordered list, both because it will make what you want to do easier and for semantic purposes.

Then, you can position your <li>s relatively and the images inside them absolutely. That way animating the images won't disrupt the layout of the grid. Just hide the <li> at the end instead of just the image.

Upvotes: 2

Related Questions