shorthand help? Script seems too long!
Hi,
The JQuery script I'm using (see below) works fine. However, being fairly new to JQuery, I'm fairly sure that the script could be shortened significantly.
I'm certainly and obviously not a javascript expert so any help in setting me on the correct path would be greatly appreciated!
Thanks
-
$(document).ready(function() {
$('.Service1').hoverIntent(function() {
$(this).parent().css({"background-color": "#005957"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service2').hoverIntent(function() {
$(this).parent().css({"background-color": "#ea9819"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service3').hoverIntent(function() {
$(this).parent().css({"background-color": "#006495"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service4').hoverIntent(function() {
$(this).parent().css({"background-color": "#956e8e"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service5').hoverIntent(function() {
$(this).parent().css({"background-color": "#619080"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service6').hoverIntent(function() {
$(this).parent().css({"background-color": "#c37b13"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service7').hoverIntent(function() {
$(this).parent().css({"background-color": "#4d8abe"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
$('.Service8').hoverIntent(function() {
$(this).parent().css({"background-color": "#7a003c"});
$(this).animate({"paddingLeft": "+=5px"}, 100);
$(this).addClass("addArrow");
}, function() {
$(this).parent().css({"background-color": "#dfe7f0"});
$(this).animate({"paddingLeft": "-=5px"}, 100);
$(this).removeClass("addArrow");
});
});