[jQuery] Re: How to avoid throbbing "Hover" actions?
Stop all previous animations before starting a new one:
$(".block img").hover(function() {
$(this).stop().animate({
width: '120px',
height: '120px',
marginTop: '5px',
}, "normal")
},function(){
$(this).stop().animate({
width: '80px',
height: '80px',
marginTop: '25px',
}, "normal")
});
- ricardo
On Oct 13, 5:05 pm, 703designs <[EMAIL PROTECTED]> wrote:
> Using either $.fn.hover or $.fn.mouse(over|out), I can't figure out
> how to prevent my animations from firing repeatedly. You'll see what I
> mean:http://703designs.com/jQuery/port.php(view source to see what's
> going on).
>
> How would I change this so that the over/hover event can't fire until
> the element is finished with its current animation? How would I change
> this so an animation only continues until the mouse leaves rather than
> taking the full step from 80px h/w to 120px h/w?
[jQuery] Re: How to avoid throbbing "Hover" actions?
Good call, I didn't know about stop().
I have one more problem though: stop() stops all animations, so the
next action (hide all of these boxes if any is clicked) gets halted. I
tried using unbind(), but it looks like it's either not working or
(more likely) is being terminated by the hover() method before it has
a chance to finish. I tried to go a step deeper, separating this into
mousedown and mouseup events (unbind on mouse down, fadeOut on mouse
up) but the hovered element doesn't hide if it's hovered after the
click.
Updated: http://703designs.com/jQuery/port.php
On Oct 13, 11:32 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> Stop all previous animations before starting a new one:
>
> $(".block img").hover(function() {
> $(this).stop().animate({
> width: '120px',
> height: '120px',
> marginTop: '5px',
> }, "normal")
> },function(){
> $(this).stop().animate({
> width: '80px',
> height: '80px',
> marginTop: '25px',
> }, "normal")
> });
>
> - ricardo
>
> On Oct 13, 5:05 pm, 703designs <[EMAIL PROTECTED]> wrote:
>
> > Using either $.fn.hover or $.fn.mouse(over|out), I can't figure out
> > how to prevent my animations from firing repeatedly. You'll see what I
> > mean:http://703designs.com/jQuery/port.php(viewsource to see what's
> > going on).
>
> > How would I change this so that the over/hover event can't fire until
> > the element is finished with its current animation? How would I change
> > this so an animation only continues until the mouse leaves rather than
> > taking the full step from 80px h/w to 120px h/w?
>
>
[jQuery] Re: How to avoid throbbing "Hover" actions?
did you try using the hoverIntent plugin ? I find that it makes hover events
much easier to work with.
http://plugins.jquery.com/project/hoverIntent
LAb[au] _ *lab*oratory for *a*rchitecture and *u*rbanism
Alexandre Plennevaux
Lakensestraat 104 Rue de Laeken
Brussel 1000 Bruxelles
België _ Belgique _ Belgium
tel: +32 (0)2 2196555
fax: +32 (0)2 4266986
mail: [EMAIL PROTECTED] <[EMAIL PROTECTED]>
http://www.lab-au.com
VAT: BE0475.210.720
On Tue, Oct 14, 2008 at 3:41 PM, 703designs <[EMAIL PROTECTED]> wrote:
>
> Good call, I didn't know about stop().
>
> I have one more problem though: stop() stops all animations, so the
> next action (hide all of these boxes if any is clicked) gets halted. I
> tried using unbind(), but it looks like it's either not working or
> (more likely) is being terminated by the hover() method before it has
> a chance to finish. I tried to go a step deeper, separating this into
> mousedown and mouseup events (unbind on mouse down, fadeOut on mouse
> up) but the hovered element doesn't hide if it's hovered after the
> click.
>
> Updated: http://703designs.com/jQuery/port.php
>
>
>
> On Oct 13, 11:32 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> > Stop all previous animations before starting a new one:
> >
> > $(".block img").hover(function() {
> > $(this).stop().animate({
> > width: '120px',
> > height: '120px',
> > marginTop: '5px',
> > }, "normal")
> > },function(){
> > $(this).stop().animate({
> > width: '80px',
> > height: '80px',
> > marginTop: '25px',
> > }, "normal")
> > });
> >
> > - ricardo
> >
> > On Oct 13, 5:05 pm, 703designs <[EMAIL PROTECTED]> wrote:
> >
> > > Using either $.fn.hover or $.fn.mouse(over|out), I can't figure out
> > > how to prevent my animations from firing repeatedly. You'll see what I
> > > mean:http://703designs.com/jQuery/port.php(viewsourceto
> > > see what's
> > > going on).
> >
> > > How would I change this so that the over/hover event can't fire until
> > > the element is finished with its current animation? How would I change
> > > this so an animation only continues until the mouse leaves rather than
> > > taking the full step from 80px h/w to 120px h/w?
> >
> >
>
[jQuery] Re: How to avoid throbbing "Hover" actions?
Sounds like a good idea, but according to the Plugin page, "this
plugin tracks the user's mouse onMouseOver and waits until it slows
down before calling the onMouseOver function." That probably won't be
useful here: What I need is for stop() to only affect the hover
functions.
As a work-around, I've wrapped the image set in a wrapper and
applied fadeOut() to that instead of the portImages set. I could
dynamically wrap it and hide the returned set, but it's simpler and
faster to avoid the DOM node creation for a simple, predictable
action.
On Oct 14, 9:46 am, "Alexandre Plennevaux" <[EMAIL PROTECTED]>
wrote:
> did you try using the hoverIntent plugin ? I find that it makes hover events
> much easier to work with.http://plugins.jquery.com/project/hoverIntent
>
> LAb[au] _ *lab*oratory for *a*rchitecture and *u*rbanism
>
> Alexandre Plennevaux
>
> Lakensestraat 104 Rue de Laeken
> Brussel 1000 Bruxelles
> België _ Belgique _ Belgium
>
> tel: +32 (0)2 2196555
> fax: +32 (0)2 4266986
>
> mail: [EMAIL PROTECTED] <[EMAIL PROTECTED]>http://www.lab-au.com
> VAT: BE0475.210.720
>
> On Tue, Oct 14, 2008 at 3:41 PM, 703designs <[EMAIL PROTECTED]> wrote:
>
> > Good call, I didn't know about stop().
>
> > I have one more problem though: stop() stops all animations, so the
> > next action (hide all of these boxes if any is clicked) gets halted. I
> > tried using unbind(), but it looks like it's either not working or
> > (more likely) is being terminated by the hover() method before it has
> > a chance to finish. I tried to go a step deeper, separating this into
> > mousedown and mouseup events (unbind on mouse down, fadeOut on mouse
> > up) but the hovered element doesn't hide if it's hovered after the
> > click.
>
> > Updated:http://703designs.com/jQuery/port.php
>
> > On Oct 13, 11:32 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> > > Stop all previous animations before starting a new one:
>
> > > $(".block img").hover(function() {
> > > $(this).stop().animate({
> > > width: '120px',
> > > height: '120px',
> > > marginTop: '5px',
> > > }, "normal")
> > > },function(){
> > > $(this).stop().animate({
> > > width: '80px',
> > > height: '80px',
> > > marginTop: '25px',
> > > }, "normal")
> > > });
>
> > > - ricardo
>
> > > On Oct 13, 5:05 pm, 703designs <[EMAIL PROTECTED]> wrote:
>
> > > > Using either $.fn.hover or $.fn.mouse(over|out), I can't figure out
> > > > how to prevent my animations from firing repeatedly. You'll see what I
> > > > mean:http://703designs.com/jQuery/port.php(viewsourceto
> > > > see what's
> > > > going on).
>
> > > > How would I change this so that the over/hover event can't fire until
> > > > the element is finished with its current animation? How would I change
> > > > this so an animation only continues until the mouse leaves rather than
> > > > taking the full step from 80px h/w to 120px h/w?
>
>
