I guess this was solved in your later repost.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 10, 2009 at 12:05 PM, godzilla74 <justi...@gmail.com> wrote:
>
> Hi,
>
> I'm just learning jQuery and working on stuff for fun, but right now,
> I am stumped! I have a hover animation happening with 4 small
> images. Think of them as being in a small box with some padding to
> separate each image. These images are small and absolutely positioned
> so i could change the actual size. Just to make sure you know what I
> mean, here is the HTML & CSS:
>
> <style>
>
> /* the images are actually much larger, we just want to show a snippet
> */
> span.resize{
> width:100px;
> height:75px;
> overflow:hidden;
> padding:3px;
> }
>
> span#pic1, span#pic2, span#pic3, span#pic4{
> position:absolute;
> z-index:-1;
> }
>
> span#pic1{
> margin:0;
> }
>
> span#pic2{
> margin:0 0 0 110px;
> }
>
> span#pic3{
> margin:85px 0 0 0;
> }
>
> span#pic4{
> margin:85px 0 0 110px;
> }
> </style>
> </head>
>
> <body>
> <span class="resize" id="pic1"><img src="images/flower1.jpg" /></
> span>
> <span class="resize" id="pic2"><img src="images/flower2.jpg" /></
> span>
> <span class="resize" id="pic3"><img src="images/flower2.jpg" /
>></span>
> <span class="resize" id="pic4"><img src="images/flower3.jpg" /></
> span>
> </body>
>
>
> When a user hovers over an image, it actually becomes larger and the z-
> index increases to make sure it displays over the other images (which
> works fine). However, upon the hover out state, the z-index seems to
> jump up in the chain and run before the animation! So, as the image
> is going back to it's normal (smaller) state, the other images around
> it show up in front as if they have a higher z-index than the hovered-
> out image. I don't understand why this is and I can't figure out how
> to fix it for the life of me! Any help would be much appreciated!
> Here is the jQuery I have thus far:
>
> //original span.resize values that we set in the CSS
> var oWidth = $('span.resize').width();
> var oHeight = $('span.resize').height();
>
> //hover over the span image to start the function
> $('span.resize').hover(function(){
> $(this)
> .stop()
> .css('z-index','99')
> .animate({
> width:$('span.resize img').width(),
> height:$('span.resize img').height()
> },1000)
> },
> function(){
> $(this)
> .css('z-index','1')
> .animate({
> width:oWidth,
> height:oHeight
> },1000)
> });
> });
>
>
>
> Thanks!
>
