我想知道如何簡化此代碼

Question

我真的只想知道如何摺疊此代碼。它工作正常，但我相當厭倦了總是不得不復制和粘貼jQuery的許多行。任何幫助將不勝感激。 http://jsfiddle.net/eE35W/5/

$(document).ready(function(){ 
    $(".creep1").mouseover(function(){ 
    $(".deep1").animate({ 
     left:'0px', 
     opacity:'100', 
     height:'100px', 
     width:'300px' 
    }); 
    }); 
    $(".creep1").mouseout(function(){ 
    $(".deep1").animate({ 
     left:'0px', 
     opacity:'0.5', 
     height:'100px', 
     width:'10px' 
    }); 
    }); 
    $(".creep2").mouseover(function(){ 
    $(".deep2").animate({ 
     left:'0px', 
     opacity:'100', 
     height:'100px', 
     width:'300px' 
    }); 
    }); 
    $(".creep2").mouseout(function(){ 
    $(".deep2").animate({ 
     left:'0px', 
     opacity:'0.5', 
     height:'100px', 
     width:'10px' 
    }); 
    }); 
    $(".creep3").mouseover(function(){ 
    $(".deep3").animate({ 
     left:'0px', 
     opacity:'100', 
     height:'100px', 
     width:'300px' 
    }); 
    }); 
    $(".creep3").mouseout(function(){ 
    $(".deep3").animate({ 
     left:'0px', 
     opacity:'0.5', 
     height:'100px', 
     width:'10px' 
    }); 
    }); 
    $(".creep").click(function(){ 
    $(".wrap1, .wrap2, .wrap3").toggle({ 
     left:'0px', 
     opacity:'100', 
     height:'100px', 
     width:'300px' 
    }); 
    }); 
}); 

Answer 1

相反creep1的，creep2 ... creepn和deep1，deep2 ... deepn，只要將普通類蠕變和深。並簡化您的代碼爲：

$(".creep").mouseout(function() 
{ 
    $(this).next().animate({ // Since deep is next div to creep (as per your code) 
     left:'0px', 
     opacity:'0.5', 
     height:'100px', 
     width:'10px' 
    }); 
}); 

同樣，您可以編寫您的mouseover函數。

Answer 2

如果您更改爲普通類，而不是編號者，你可以這樣做：

$(document).ready(function(){ 
    $(".creep").hover(function(){ 
    $(this).next().animate({ 
     opacity:'100', 
     width:'300px' 
     // since you are not changing the values 
     // of the other properties they have been left out 
    }); 
    }),function(){ 
    $(this).next().animate({ 
     opacity:'0.5', 
     width:'10px' 
    }); 
    }); 
    }; 
//remaining code 
});