Question

I’ve got the following question regarding passing a parameter to the function bellow.

The way it’s done at the moment:

I’ve got that transitional effect between two images when the mouse is hovering it. I need 1 function per image as the path of each images is different and I use a different class to differentiate all the images.

Javascript:

</script>    
    $(function() {
    $(".fade_image1")

    .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
         });
    });
    $(function() {
    $(".fade_image2")

        .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
                     }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        });
    });
</script>

HTML:

<div>
  <a href="#" class="fade_image1">Image<span></span></a>
</div>
<div>
  <a href="#" class="fade_image2">Image<span></span></a>
</div>

CSS:

.fade_image1{
display: inline-block;
position: relative;
text-indent: -9999px;
width: 303px;
height: 605px;
background: url(images/20130128_UK_Colour-Campaign_cropped_02.jpg) no-repeat;
}
.fade_image1 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_02.jpg) no-repeat;
/*background-position: -50px 0;*/
}
.fade_image2{
display: inline-block;
position: relative;
text-indent: -9999px;
width: 608px;
height: 302px;
background: url(images/20130128_UK_Colour-Campaign_cropped_03.jpg) no-repeat;
}
.fade_image2 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_03.jpg) no-repeat;
/*background-position: -50px 0;*/
}

So here is my question, How can I simplify this by having only 1 javascript function working for all the images ? I understand I would need the path of the images to be passed into the function and then I could use the css stuff of JQuery, but I don’t know more 🙂

so please help me 🙂

Answer 1

This should suit your needs:

$(function() {

    function setupFade(selector) {
        $(selector)
        .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        });
    }

    setupFade(".fade_image1");
    setupFade(".fade_image2");

});

One single setupFade function, but two calls.