Can I shrink this jquery script down?

Question

Hello, I was wondering if someone can help me shrink this jquery script down a bit? Right now, I have the ID on hover, but that can be changed to a class if need be.

I'm sure there must be some way of doing it with "this" instead of having to list each and every one down.

Below is an example with 2 of 11 different functions. I'm hoping there's some way of shrinking this down... like I said, if I need to change the id's to Classes, that is fine too.

Thanks! Troy

<script>
$(document).ready(function(){

$("#gfo-1").hover(
function() {
$(".gfo-1-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$(".gfo-1-arrow").stop().animate({"opacity": "0"}, "slow");
});

$("#gfo-2").hover(
function() {
$(".gfo-2-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$(".gfo-2-arrow").stop().animate({"opacity": "0"}, "slow");
});

});
</script>

Answer 1

Yes you should probably use a class.

So where you set your gfo-1, gfo-2 ID's, add a class of say "gfo".

<div class="gfo">etc</div>

Then in your jQuery, you can use something like:

<script type="text/javascript">
$(document).ready(function(){
    var $arrow = $(".gfo-1-arrow"); // Store object for performance
    $(".gfo").hover(
    function() {
        $arrow.stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $arrow.stop().animate({"opacity": "0"}, "slow");
    });
});
</script>

Depending on your requirements you might also be able to use fadeIn() and fadeOut respectively.

<script type="text/javascript">
$(document).ready(function(){
    var $arrow = $(".gfo-1-arrow"); // Store object for performance
    $(".gfo").hover(
    function() {
        $arrow.stop().fadeIn("slow");
    },
    function() {
        $arrow.stop().fadeOut("slow");
    });
});
</script>

Answer 2

One thing you can do since your callbacks are very similar, is write a function that generates callbacks. It uses the concept of closures.

<script>
$(document).ready(function(){

function makeCallback(id, opacity) {
 return (function() {
    $(id).stop().animate({"opacity": opacity}, "slow");
 });
}
$("#gfo-1").hover(makeCallback(".gfo-1-arrow", "1"),makeCallback(".gfo-1-arrow","0"));
$("#gfo-2").hover(makeCallback(".gfo-2-arrow", "1"),makeCallback(".gfo-2-arrow","0"));
});
</script>

Answer 3

The main thing that you could do to shorten the script is to write the function more generically with a class or something

$(document).ready(function(){
$(".gfo").hover(
function() {
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "0"}, "slow");
});
})

This way you can write the function once for all affected elements.

Answer 4

Without changing your HTML at all, you can shorten it down to this:

$(function(){
  $("#gfo-1, #gfo-2").hover(function() {
    $("." + this.id + "-arrow").stop(true, true)
                               .animate({opacity: "toggle"}, "slow");
  });
});

If you gave the #gfo-1 and #gfo-2 elements a class, you could shorten $("#gfo-1, #gfo-2") down to $(".thatClass") as well, making this work on as many as you want.