Как реализовать анимацию при смене слайда ajax?

Question

[NotBad_Bugfix]

Здравствуйте, вот код. Естественно, что после нажатия отправляется ajax запрос который меняет шаблон(underscore) и анимация прекращается не закончившись. Так же не срабатывает анимация при появлении, но это тоже понятно, так как код не правильный и я не знаю как это можно осуществить. Нужны подсказки, заранее спасибо

$(".main-head").on("click", "#next", function(e) {
	e.preventDefault();
	var template = $("#slider").html();
	var id = $(".main-head .id").data('id');
	var countdown = $(this).find('a.count');
	var cur_count = countdown.data("count");
	var slides_count = $('.main-head').data('slides');

	$.ajax({
		type: "post",
		url: "/gtc/next",
		data: { "id":id },
		beforeSend: function() {
			$(".main-head .covered").hide("explode", {}, 1000);
		},
		success: function(item) {
		 	$(".main-head").html(_.template(template,{ item:item }));
		 	$(".main-head .covered").show("explode", {}, 1000);
       		$(".main-head").find('a.count')
				.text(cur_count+1+"/"+slides_count)
				.data('count', cur_count+1)
				.attr('count', cur_count+1);
        }
	});
	
});

Answer 1

[Александр Таратин]

{
		type: "post",
		url: "/gtc/next",
		data: { "id":id },
		success: function(item) {
                        $(".main-head .covered").hide("explode", {}, 1000,function(){
                                  $(".main-head").html(_.template(template,{ item:item }));
		 	          $(".main-head .covered").show("explode", {}, 1000);
       		                  $(".main-head").find('a.count')
				            .text(cur_count+1+"/"+slides_count)
				            .data('count', cur_count+1)
				            .attr('count', cur_count+1);
                        });
                }
	}

Comments

[NotBad_Bugfix]

Теперь анимация проходит до конца, но при появлении (рендере нового слайда) анимация не проигрывается, он тупо появляется и все

Answer 2

[Сергей Мельников]

не понятно, откуда вы это взяли -
.hide("explode", {}, 1000);

попробуйте так:

$(".main-head").on("click", "#next", function(e) {
  e.preventDefault();
  var template = $("#slider").html(),
    id = $(".main-head .id").data('id'),
    countdown = $(this).find('a.count'),
    cur_count = countdown.data("count"),
    slides_count = $('.main-head').data('slides');

  $(".main-head .covered").fadeOut(1000, function() {
    $.post("/gtc/next", { id: id }, function(resp) {
      $(".main-head").html(_.template(template, { item:resp }));      
      $(".main-head").find('a.count')
        .text(cur_count+1+"/"+slides_count)
        .data('count', cur_count+1)
        .attr('count', cur_count+1);
      $(".main-head .covered").fadeIn(1000);
    }); 
  });   
});

Comments

[Александр Таратин]

@mlnkv ----> не понятно, откуда вы это взяли -
.hide("explode", {}, 1000); <---- www.tutorialspoint.com/jquery/effect-explode.htm