CODEWITHSUNDEEP
jquerynavigationjquery-animate
Username19
Username19

Reputation: 43

jQuery Animate - navigation

I am using the jQuery function .animate to highlight navigation links one by one. They are in a ul. I can get this to work, just wondering if there is a way to shorten my code so that I don't have to highlight each item individually. Thanks in advance

$(document).ready(function(){
    $('#button1').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button1').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button2').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button2').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button3').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button3').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button4').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button4').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
});

Upvotes: 3

Views: 125

Answers (4)

Simone Pessotto
Simone Pessotto

Reputation: 1581

Try to identify your buttons with a common class rather than with the id.

for example by assigning the class "buttons", and the javascript code will be:

$(document).ready(function(){
$(".buttons").mouseenter(function(){
    $(this).animate({
        color:"#FFFFFF",
        backgroundColor: "#FF9B05"
    });
});
$(".buttons").mouseleave(function(){
    $(this).animate({
        color:"#FF9B05",
        backgroundColor: "#FFFFFF"
    });
});

Upvotes: 0

Krishna
Krishna

Reputation: 1985

$('[id^=button]').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
$('[id^=button]').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });

This "^" will search for element id starts with "button"

Upvotes: 0

colestrode
colestrode

Reputation: 10658

Combine all your selectors into one statement, then attach the event listeners:

$('#button1, #button2, #button3, #button4').mouseenter(function(){
    $(this).animate({
        color:"#FFFFFF",
        backgroundColor: "#FF9B05"
    });
}).mouseleave(function(){
    $(this).animate({
        color:"#FF9B05",
        backgroundColor: "#FFFFFF"
    });
});

Upvotes: 3

kobigurk
kobigurk

Reputation: 741

maybe define two functions :

function animateLeave() {
     $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
}

 function animateEnter() {
     $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
}

Assign the following classes to the appropriate buttons (i.e., button1 will have class="leaveAnimation"), and do :

$('.leaveAnimation').mouseleave(animateLeave);

Same for enter.

Upvotes: 0

Related Questions