[jQuery] Re: show/hide opacity gets stuck sometimes
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
Thanks a lot :)
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
You're welcome. Glad it proved useful.
On Dec 9, 1:22 pm, Tijmen Smit [EMAIL PROTECTED] wrote:
Thanks a lot :)
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
On Dec 9, 2008, at 1:22 PM, Tijmen Smit wrote:
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
Not your fault. The note about the .stop() options looked almost like
a footnote. Quite easy to miss. I've just updated the page to place
the options in their proper place.
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for
it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for
the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it
get a
bit weird. Sometimes the box with the big photo disappears
completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have
anything
to do with the z-index.
You can see it in action here -http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show,
top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide,
top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a
simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
