Yes, it was solved! Thanks for the help everyone.
I had to use a callback in the hoverout animate() function, so the z-
index would actually be taken care of AFTER the animation ran:
$('span.resize').hover(function(){
//testing
//$('#test').html(iWidth +','+ iHeight);
$(this)
.stop()
.css('z-index','9')
.animate({
width:$('span.resize img').width(),
height:$('span.resize img').height()
},1000)
},
function(){
$(this)
.stop()
.animate({
width:oWidth,
height:oHeight
},1000, function(){
$(this)
.css('z-index','1');
});
});
On Jan 10, 11:53 pm, "jQuery Lover" <ilovejqu...@gmail.com> wrote:
> 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!
