The next step towards efficient jQuery...?!

Question

I'm using the below code for a rollover effect, seems to be working okay!

What I'm interested in is taking this to the next step in a modular way. What I mean is that rather than stipulate every single possibility, how could I start to produce what I suppose would be a plugin?

Many thanks!

$(document).ready(function() {

    $('#damart_490').hide();
    $('#simply_490').hide();

    $('.damart_link').hover(
        function() {
            $('#damart_490').show('blind',250);
                    },
        function() {
            $('#damart_490').hide('blind',250);
    });

    $('.simply_link').hover(
        function() {
            $('#simply_490').show('blind',250);
                    },
        function() {
            $('#simply_490').hide('blind',250);
    });

});

Answer 1

The next step would be to reduce repetition by writing a function:

function hover_link(link, element)
{
    $(element).hide();

    $(link).hover(
        function() {
            $(element).show('blind',250);
        },
        function() {
            $(element).hide('blind',250);
    });
}

hover_link('.damart_link', '#damart_490');
hover_link('.simply_link', '#simply_490');

Answer 2

You could try the button widget from JQuery UI

JQuery UI

Answer 3

Sorry if this is very simple but how would I make this into a separate file plugin and reference it? At the moment I've got a file called rollover.js with this in...

function hover_link(link, element)
    {
        $(element).hide();

        $(link).hover(
            function() {
                $(element).show('blind',250);
            },
            function() {
                $(element).hide('blind',250);
        });
    }

And this in my page...

<script src="js/rollover.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

$hover_link('.damart_link', '#damart_490');
$hover_link('.simply_link', '#simply_490');

});

</script>

Am I just missing some syntax?! Thank-you!

Answer 4

There seems to be an issue with the way you're calling the jquery show() function. The documentation for show() says it will accept only a duration and an optional callback function to execute once the effect is complete.

.show( duration, [ callback ] )

I see no support for effect style 'blind' that you've used. Maybe I don't have all the code you're running. The example shown above crashes for me because 250 is an integer not a valid function.

As for the option to make the function a jQuery plugin I've built this:

$.fn.hover_link = function(target){

    //hide the target that will be toggled and store a reference to it
    $target = $(target).hide();     

    $(this).hover(
        function(){
            $(target).show(250);
        },

        function(){
            $(target).hide(250);
        }
    )

    //support jQuery chaining
    return this;
}

You can use it like this:

HTML

<a href="#" class="trigger">The trigger</a>
<div class="targetElement">The target</div>

JavaScript

$('.trigger').hover_link('.targetElement')

You can read a good tutorial about jquery plugins right on their website at: http://docs.jquery.com/Plugins/Authoring