You can just join the ids together with ,
which by convention adds the selectors to a set in jQuery. After doing that, you can assign the event to the set returned by those selectors. Each event will have access to the current element this
. TweenMax.to
expects a selector or an element, so you can pass this
into the function without manually constructing an id selector.
var cards = new Array('#box0','#box1','#box2');
var cardSelector = cards.join(",");
function bindCardEvents(){
$(cardSelector).mouseenter(function() {
TweenMax.to(this,0.3, {opacity:0.5} )
}).mouseleave(function() {
TweenMax.to(this,0.3, {opacity:1})
});
}
bindCardEvents();
For brevity this will also work
$(cards.join(",")).mouseenter(function() {
TweenMax.to(this,0.3, {opacity:0.5} )
}).mouseleave(function() {
TweenMax.to(this,0.3, {opacity:1})
});