jQuery multiple selectors into dynamic attribute

Question

I am trying to attach an event to a separate onhover trigger. But I am having problems using multiple selectors since its dynamic.

Need help ::: Upon hovering on the yellow box named 'Rings', this should trigger the animated slide event for the green box above it.

$('.boxgrid1').hover(function(){  
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});  
}, function() {  
    $(".cover", this).stop().animate({top:'247px'},{queue:false,duration:300});  
});

nice design, one question do you mean the same effect that appears on hover the green, and you also want the yellow region to activate it? — Eric Fortis
– Eric Fortis, Commented Dec 26, 2010 at 6:40
What exactly do you want answered here? Do you want help to bid events to your images "Rings", "earrings" etc and that should trigger an animate? — Baz1nga
– Baz1nga, Commented Dec 26, 2010 at 6:45
Given the structure of your HTML you may have to use some of jQuery's DOM traversal functions to accomplish that. You may also want to add a common class to each of your images so that you can select them all and animate them using a single hover() binding. — BoltClock
– BoltClock, Commented Dec 26, 2010 at 6:46

Nick Craver · Accepted Answer · 2010-12-26 09:32:38Z

4

With a few markup tweaks we can greatly simplify your code, for example let's give those hover <div> elements a common class as well, like this:

<div class="boxgrid boxgrid1">

Then your code becomes much simpler, you can replace all that repeated code with this:

$('.boxgrid .cover').css({ top: '247px' });

$('.boxgrid').hover(function() {
    $(".cover", this).stop().animate({ top: '0px' }, 300);
}, function() {
    $(".cover", this).stop().animate({ top: '247px' }, 300);
});
$("#shop_buttons_table tr:nth-child(2)").delegate("td", "mouseenter mouseleave", function(e) {
    $("#shop_buttons_table tr:nth-child(1) .boxgrid").eq($(this).index()).trigger(e);
});

You can test it out here, all we're doing is taking the "hover" events from the lower cells and passing them onto the .boxgrid elements in the row before, the net effect (with the .stop() calls you already had) is a single hoverable area for the user.

answered Dec 26, 2010 at 9:32

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nuclearsugar Over a year ago

Thanks! It is very helpful to see and understand the optimization.

Sarfraz · Accepted Answer · 2010-12-26 07:00:02Z

0

Give a class name to your <a> tag outside <img>(RINGS) tag like <a class="boxgrid1" href="#">

edited Dec 26, 2010 at 7:00

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

answered Dec 26, 2010 at 6:56

erinus

7344 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery multiple selectors into dynamic attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related