多個懸停和動畫實例與jQuery

Question

我有一個身體地圖上有多個觸發點。我想要一個裝滿標題和副本的獨特盒子，以顯示每個觸發點懸停的情況。我一次寫出了一個函數，但我想寫一個更清晰，更簡潔的函數。這是我到目前爲止：

$(".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"); 
    } 
); 

我怎樣才能更有效地寫這個？

容納這是HTML：

      <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> 

Answer 1

你可以轉動這些匿名懸停功能可以用於簡化維護的命名功能，並結合一些選擇器。另外，我認爲每個服務的div將遵循在頁面佈局觸發鏈接，這樣我們就可以使用$(this).next('div')引用它們在懸停功能：

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); 

見工作演示＆＃x2192; http://jsfiddle.net/KSqeF/2/

Answer 2

如何使用服務1，服務2等標識。然後創建一個for循環來構造這些函數併爲您附加這些事件。有點像：

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

雖然我認爲理想的解決方案是使用類整個事情，DOM遍歷找到相關的服務信息。這樣，您將.hover事件附加到所有.points，然後使用$(this).next('div')或其他來查找關聯的元素。這是我認爲最乾淨的方式。

Answer 3

爲A標籤賦予一個'title'屬性，它與您希望顯示的DIV'id'匹配。

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"); 

}); 

示例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> 

Answer 4

假設你的HTML始終有<a>立即.fpt-service DIV之前，你可以處理所有的情況下，像這樣一個片段：

$('.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"); 
});