@NotBad_Bugfix

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

Здравствуйте, вот код. Естественно, что после нажатия отправляется 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);
        }
	});
	
});
  • Вопрос задан
  • 2435 просмотров
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
{
		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);
                        });
                }
	}
Ответ написан
mlnkv
@mlnkv
JavaScript Developer
не понятно, откуда вы это взяли -
.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);
    }); 
  });   
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
17 апр. 2024, в 00:31
1000 руб./за проект
17 апр. 2024, в 00:13
800 руб./за проект
17 апр. 2024, в 00:06
240000 руб./за проект