Question

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')
    })
               .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!

Answer 1

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')});
}