Multiple Hover & Animate Instances with jQuery

I h开发者_开发知识库ave a body map with multiple trigger points on it. I'd like a unique box filled with a title and copy to show up on hover per trigger point. I've written each function out one at a time, but I'd like to write it a little cleaner and more concise. Here's what I have so far:

$(".point-one").hover(
function() {
    $("#patient-body").animate({opacity: 0.3});
    $(".trigger-point").animate({opacity: 0.1});
    $("#service-one").animate({opacity: 1.0});
},
function() {
    $("#patient-body").delay(100).animate({opacity: 1.0}, "fast");
    $(".trigger-point").delay(100).animate({opacity: 1.0}, "fast");
    $("#service-one").delay(100).animate({opacity: 0}, "fast");
});


$(".point-two").hover(
    function() {
        $("#patient-body").animate({opacity: 0.3});
        $(".trigger-point").animate({opacity: 0.1});
        $("#service-two").animate({opacity: 1.0});
    },
    function() {
        $("#patient-body").delay(100).animate({opacity: 1.0}, "fast");
        $(".trigger-point").delay(100).animate({opacity: 1.0}, "fast");
        $("#service-two").delay(100).animate({opacity: 0}, "fast");
    }
);

How can I write this more efficiently?

The HTML that accommodates this is:

                            <a href="#" class="trigger-point point-one">Shoulder</a>
                        <div id="service-one" class="fpt-service">
                            <h3>Shoulder</h3>
                            <p>We treat arthritis, dislocation, frozen shoulder, tendinitis, rotator cuff tears, post surgical arthroscopy, and other conditions that inhibit range of motion.</p>
                        </div>

                        <a href="#" class="trigger-point point-two">Back</a>
                        <div id="service-two" class="fpt-service">
                            <h3>Back</h3>
                            <p>Back conditions that we treat include arthritis, herniated discs, ligamentous strains, lumbar radiculopathy, rhombois and lower trapezius strain, muscular strains, osteoporosis, scoliosis, spinal stenosis, T4 syndrome and upper back stiffness.</p>
                        </div>

You can turn these anonymous hover functions into named functions for simpler maintenance and combine some selectors. Also, I assumed that each service div will follow the trigger link in the page layout so that we can use $(this).next('div') to reference them in the hover functions:

var pointIn = function (e) {
        $('#patient-body').animate({ opacity: 0.3 });
        $('.trigger-point').animate({ opacity: 0.1 });
        $(this).next('div').animate({ opacity: 1.0 });
    },
    pointOut = function (e) {
        $('#patient-body, .trigger-point').delay(100).animate({ opacity: 1.0 }, 'fast');
        $(this).next('div').delay(100).animate({ opacity: 0.0 }, 'fast');
    };

$('.point-one, .point-two').hover(pointIn, pointOut);

See working demo → http://jsfiddle.net/KSqeF/2/

How about using service-1, service-2 etc ids. Then create a for loop that constructs these functions and attaches these events for you. Sort of like:

for (i = 0; i < number_service_points; i++) {
    $(".point-" + i).hover(
        function....
    );

Although I think the ideal solution is to use classes for the whole thing and DOM traversal to find the associated service information. That way you attach the .hover event to all .points and then use $(this).next('div') or something to find the associated element. That's the cleanest way in my opinion.

Give the A tag a 'title' attribute which matches the 'id' of the DIV you want it to show.

Example Javascript:

    $(".trigger-point").hover(
function() {

    var id = $(this).attr( 'title' );

    $("#patient-body").animate({opacity: 0.3});
    $("#" + id).animate({opacity: 1.0});
    $(this).animate({opacity: 0.1});

},
function() {

    var id = $(this).attr( 'title' );

    $("#patient-body").animate({opacity: 1}, "fast");
    $("#" + id).animate({opacity: 0}, "fast");
    $(this).animate({opacity: 1.0}, "fast");

});

Example HTML:

<a title="shoulder" href="#" class="trigger-point">Shoulder</a>
<div id="shoulder" class="fpt-service">
<h3>Shoulder</h3>
<p>We treat arthritis, dislocation, frozen shoulder, tendinitis, rotator cuff tears, post surgical arthroscopy, and other conditions that inhibit range of motion.</p>
</div>

<a title="back" href="#" class="trigger-point">Back</a>
<div id="back" class="fpt-service">
<h3>Back</h3>
<p>Back conditions that we treat include arthritis, herniated discs, ligamentous strains, lumbar radiculopathy, rhombois and lower trapezius strain, muscular strains, osteoporosis, scoliosis, spinal stenosis, T4 syndrome and upper back stiffness.</p>
</div>

Assuming your HTML consistently has the <a> immediately preceding the .fpt-service div, you may be able to handle all cases with one snippet like this:

$('.trigger-point').hover( function(){ // identify by class, not ID
  $('#patient-body').animate({opacity: 0.3});
  $(this)
    .animate({opacity: 0.1});
    .nextAll('.fpt-service:first') // should walk to the correct div if present
    .animate({opacity: 1.0});
}, function(){
  $('#patient-body').delay(100).animate({opacity: 1.0}, "fast");
  $(this)
    .delay(100).animate({opacity: 1.0}, "fast")
    .nextAll('.fpt-service:first')
    .delay(100).animate({opacity: 0}, "fast");
});