Question

I will need to replicate this functionality for multiple elements on the page, I can achieve it by repeating the function and changing the class name, but is there a simpler way to combine multiple instances or change the class name? In the style sheet I am animating the title of each image when the link is rolled over.

The Function:

 $("a.link1").hover(function() {
  $(".img1, .img1over").toggleClass("img1 img1over");
});
$("a.link2").hover(function() {
  $(".img2, .img2over").toggleClass("img2 img2over");
});

the HTML:

<div id="nav">
<ul>
<li><a href="#" class="link1">link1</a></li>
<li><a href="#" class="link2">link2</a></li>

</ul>
</div>

            <div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

        </div>

Answer 1

First you would need a common class for all your links to simplify your code.

The HTML

<div id="nav">
<ul>
    <li><a href="#" class="link" id="link1">link1</a></li>
    <li><a href="#" class="link" id="link2">link2</a></li>
</ul>
</div>
<div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                 </div>
 </div>

The function

$('.link').hover(function() {
    var id = $(this)[0].id.substring(4);
    $(".img"+id).toggleClass("img"+id+" img"+id+"over");
});

Now you can any number of link using a link class and an id link+number and they will refer to the corresponding img+number.