Хотите конденсировать мой анимационный сценарий jQuery
Вопрос
У меня есть сценарий анимации jQuery, который работает правильно, однако я чувствую, что есть способ уменьшить общий накладной расход для скрипта. Вот ссылка на страницу разработки:
http://dev.abinstallations.com.
Существует две части к анимации, и эти анимации применяются к шести индивидуальным элементам div. Отдельный скрипт применяется к каждому элементу. Например:
//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.
});
});
... и так далее для оставшихся четырех элементов. Есть ли конденсированный способ достичь этого?
Решение
Вы могли бы вытащить его как функцию:
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