私のjQueryアニメーションスクリプトを凝縮しようとしています
質問
適切に機能しているjQueryアニメーションスクリプトがありますが、スクリプトのオーバーヘッド全体を減らす方法があると感じています。開発ページへのリンクは次のとおりです。
http://dev.abinstallations.com
アニメーションには2つの部分があり、これらのアニメーションは6つの個別の要素に適用されます。各要素に別のスクリプトが適用されます。例えば:
//First
$("#first_flip").hide();
$("#first_button_show").click(function(){
$('#first_flip').animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#first_button_hide").click(function(){
$('#first_flip').animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
//Second
$("#second_flip").hide();
$("#second_button_show").click(function(){
$('#second_flip').animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#second_button_hide").click(function(){
$('#second_flip').animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
...残りの4つの要素など。これを達成するための凝縮された方法はありますか?
解決
関数として引き出すことができます:
Hook("first");
Hook("second");
function Hook( id )
{
$("#" + id + "_flip").hide();
$("#" + id + "_button_show").click(function(){
$("#" + id "_flip").animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#" + id + "_button_hide").click(function(){
$("#" + id + "_flip").animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
}
または、関数にいくつかのパラメーターを取り、それらの上にループさせることもできます。
所属していません StackOverflow