How can I create a jquery function involving 3 divs?
I need some help creating a function which does the same thing for the chosen elements.
I have #design1 #design1servicetext and #design1servicebutton.
Code:
//Service hover//
$('#design1').mouseenter(function (){
$('#design1servicetext').css('background-position', '0 -91px')
$('#design1servicebutton').css('background-position', '0 -33px')
})
开发者_JAVA技巧.mouseleave(function (){
$('#design1servicetext').css('background-position', '0 0px')
$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//
How can I create a function, in which I have to choose 3 divs to do the animation?
I want a function like
animatebg('#design1','#design1servicetext','#design1servicebutton');
Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance!
Hm, try this:
function animatebg( jq1, jq2, jq3 ) {
$('#'+jq1).mouseenter(function() {
$('#'+jq2).css('background-position', '0 -91px')
$('#'+jq3).css('background-position', '0 -33px')
}).mouseleave(function() {
$('#'+jq2).css('background-position', '0 0px')
$('#'+jq3).css('background-position', '0 0px')});
}
function animatebg(param1,param2,param3){
$("#"+param1).mouseenter(function (){
$("#"+param2).css('background-position', '0 -91px')
$("#"+param3).css('background-position', '0 -33px')
})
.mouseleave(function (){
$("#"+param2).css('background-position', '0 0px')
$("#"+param3).css('background-position', '0 0px')});
}
I did a infinite argument function, so you can have less or more selectors, please see the link for full example http://jsfiddle.net/AcUCm/
Here with my function:
function animatebg() {
for (var i = 0; i < arguments.length; i++) {
var val = arguments[i].toString();
$(val).live('mouseenter', function() {
$(this).css('background-position', '0 -91px')
$(this).css('background-position', '0 -33px')
}).live('mouseleave', function() {
$(this).css('background-position', '0 0px')
$(this).css('background-position', '0 0px')
});
}
}
Usage (document ready)
$(function() {
animatebg('#design1', '#design1servicetext', '#design1servicebutton');
});
精彩评论