jQuery, ajax и анимация. Глюк.

[Активист]

jQuery, ajax и анимация. Глюк.

Подскажите.
Есть, например код (используется плагин jQuery Forms).

$("js_edit_object_form").ajaxForm({
beforeSubmit: function() {
      $("#js_content_div").hide("nornal", function() {
         $("#js_loding_div").show("normal");
      })
   },

success: function(result) {
     $("#js_content_div").html(result);

     $("#js_loding_div").hide("nornal", function() {
         $("#js_content_div").show("normal");
      })
   }
});

Возникает ужасный глюк.
Если AJAX быстро обрабатывается (берется из кеша, или, например хороший интернет), то видим картину.
Начинает анимироваться блок "beforeSubmit", когда анимация еще не закончена, а запрос ajax уже выполнен, то начинается анимироваться блок success, после доанимирутся блок beforeSubmit.

Визуально это выглядит как убирается контент, появляется загрузка, до конца див загрузки не открывается, срабатывает блок success, блоки появляются и сразу исчезают, а потом сразу появляется див #js_loding_div и сразу исчезает див #js_content_div

-~{}~ 07.02.09 19:48:

Решил. Кому интересно

{literal}
<script>
$(document).ready(function() {
	//
	// Обработка submit'a формы
	//
	
	$("#js_block_header").submit(function() {
		$("#js_estate_search_result").hide("slow", function() {
			$("#js_estate_edit_form_container").hide("slow", function() {
				$("#js_estate_loading").show("slow", function() {
					
					$("#js_block_header").ajaxSubmit({
						async: false,
						success: function(data) {
							if (data) {
								$("#js_estate_search_result").html(data);
								
								$("#js_estate_loading").hide("normal", function() {
									$("#js_estate_search_result").show("normal");
								});
							};
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							alert("Произошла ошибка при AJAX запросе. Возмоно страница не найдена. Ответ от сервера:" + XMLHttpRequest.responseText);
						}
					});
					
				});	
			});
		});
		return false;
	});
});
</script>
{/literal}

 

[-SkyNet-]

можно было бы решить двумя событиями и общим триггером

 

[Активист]

-SkyNet-
Вот тут по-подробней пожалуйста

 

[ksnk]

var d_data=true;

function o_success(result){
     $("#js_content_div").html(result);

     $("#js_loding_div").hide("normal", function() {
         $("#js_content_div").show("normal");
      })
}

$("js_edit_object_form").ajaxForm({
    beforeSubmit: function() {
      d_data =false;
      $("#js_content_div").hide("normal", function() {
         $("#js_loding_div").show("normal", function(){
           if (d_data!==false) o_success(d_data);
           d_data=true; 
         });
      })
   },

    success: function(result){
      if(d_data ===false){
        d_data =result;
      } else {
        o_success(result);
        d_data =true;
      }
    }
});

Чего-то такое, наверное...

 

[AmdY]

вроде там есть что-то вроде остановки анимации, посмотрите в мане на сайте jquery

-~{}~ 11.02.09 18:34:

точно, $(элемент).stop()

 

[-SkyNet-]

в общем случае - когда подобных "накладок" больше пары,- имеет смысл прибегнуть к универсальному классу регистрации обработчиков и сбора событий, так чтобы обработчик вызывался при срабатывании указанного набора событий.

Решение вижу примерно так :

$.extend({
    smartEvents : {
        registry : {},
        add : function (myName, events, callback)  {
            this.registry[myName] = {events : events, callback : callback}; // events - массив имён событий
        }, 
        trigger : function (myName, event) {
             if(typeof this.registry[myName] != 'undefined') {
                 var trigFlag=true;
                 for (var i=0 in this.registry[myName].events) {
                     if (this.registry[myName].events[i] == event) {
                        delete this.registry[myName].events[i];}
                     if (typeof this.registry[myName].events[i]!='undefined')
                        trigFlag=false;
                 }
                 if (trigFlag)
                     this.registry[myName].callback();
             }
        }
    }
});

// Проверка :
$.smartEvents.add("myEventBlock",["ev1","ev2"],function(){alert("Callback!");});

setTimeout(function(){
    $("body").append(" ev1");
    $.smartEvents.trigger("myEventBlock","ev1");
},500);

setTimeout(function(){
    $("body").append(" ev2");
    $.smartEvents.trigger("myEventBlock","ev2");
},1000);

соответственно, при желании можно добавить в реестр и набор аргументов для callback, а в финальном триггере вызвать callback с аргументами.

Хотя, конечно, для конкретной задачи с единственной временной "накладкой", глобальный флажок прекрасно работает.

 

[Активист]

Однако $(элемент).stop() меньше по коду будет ))

-SkyNet-
Тут без 100 или даже 200 грамм никуда))) Буду разбираться.

Спасибо всем

 

[ksnk]

Активист проблемы со stop'ом появляются после 2-3 быстрого клика по ссылке

 

[-SkyNet-]

Активист как говорится, большому кораблю - .... =))

желаю удачи и интересных проектов!