Jquery: есть ли способ создать функции в моем небольшом кусочке кода, чтобы сделать это быстрее / проще / меньше?

Question

Я пытаюсь найти способ сделать это меньше, используя функции / переменные в моем jquery.

$('.search-what-category').fadeOut('normal', function(){  
  $('.search-wrapper').animate({'height':40})  
})


$('.search-what-category').fadeOut('normal', function(){    
  $('.search-wrapper').animate({'height':40}, function(){
    $('.search-wrapper').animate({'top':-60})
}) 

Я могу создать первый фрагмент в функцию, но второй фрагмент имеет дополнительныйстрока в нем (см. первый и второй фрагменты одинаковы, но второй имеет дополнительную строку кода).Как мне создать функцию для первого фрагмента, а затем добавить в нее дополнительную строку, показанную во втором фрагменте?Вот что я попробовал:

function hidecat(){
  $('.search-what-category').fadeOut('normal', function(){  
    $('.search-wrapper').animate({'height':40})  
  })
}

hidecat($('.search-wrapper').animate({'top':-60}))

, но, похоже, это не сработало.Я хочу, чтобы функция hidecat () активировалась, а затем, когда это будет сделано, активировать дополнительную строку кода, как в моем примере прямо над этим.

Answer 1

Вы должны позволить себе передать обратный вызов, например:

function hidecat(callback){
  $('.search-what-category').fadeOut('normal', function(){  
    $('.search-wrapper').animate({'height':40}, callback);
  })
}

Затем передайте этот параметр и анонимную функцию (которая будет вызываться после завершения первой анимации):

hidecat(function() { $(this).animate({'top':-60}); });

---

Или, если это всегда анимация, просто передайте параметры:

function hidecat(opt){
  $('.search-what-category').fadeOut('normal', function(){  
    var sw = $('.search-wrapper').animate({'height':40});
    if(opt) sw.animate(opt);
  })
}

hidecat({'top':-60});

Проверка if() позволяет вам просто вызывать hidecat(); также без каких-либо опций, что ничего не запустит после анимации height.

Answer 2

Как насчет:

function hidecat(callback){
  $('.search-what-category').fadeOut('normal', function(){  
    $('.search-wrapper').animate({'height':40})  
  })

  function() {callback}
}

hidecat($('.search-wrapper').animate({'top':-60}))

Я думаю, что это работает ...