Блог

У меня есть код, в котором я загружаю данные из php-запроса через jquery. Я хочу, чтобы он загрузил данные и анимировал div, открытый для автоматического изменения высоты.

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

Я пытался решить эту проблему, но, похоже, не могу найти решение, поэтому я прошу немного помочь в этом. Мне действительно нужна функция загрузки для события щелчка. Потому что он проходит через переменные, которые я использую в своем php-запросе.

Вот код jQuery, который я использовал:

 $(document).ready(function(){ $(".orderBlok").click(function(){  var order = $(this).find('.orderBlokNummer').text();  var dat = $('#datumSelector').val();  $('#orderSelector').val(order);  $("#"   order).load("bonselect.php", {  dezeOrder: order,  datumVandaag: dat  });  var open = $(this).find('.orderBlokBonGedeelte'),  animateTime = 500;  if(open.height() == 0){  autoHeightAnimate(open, animateTime);  } else {  open.stop().animate({ height: '0' }, animateTime);  } });  function autoHeightAnimate(element, time){  var curHeight = element.height(), // Get Default Height  autoHeight = element.css('height', 'auto').height(); // Get Auto Height  element.height(curHeight); // Reset to Default Height  element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height }  

});

Любая помощь будет признательна!

Проблема, похоже, в том, что вы не выполнили действия для анимации после загрузки запроса.

Запрос является асинхронным, поэтому, возможно, в момент выполнения анимации вам повезет, если она будет загружена, а может и нет. Вот почему при втором щелчке обязательно загружается.

Попробуйте что-нибудь вроде этого

 $(document).ready(function(){  $(".orderBlok").click(function(){  var order = $(this).find('.orderBlokNummer').text();  var dat = $('#datumSelector').val();  var clicked_element = $(this);  $('#orderSelector').val(order);  $("#"   order).load("bonselect.php", {  dezeOrder: order,  datumVandaag: dat  }, function() {    openAnimation(clicked_element);    });  });   });      function openAnimation(clicked_element) {  var open = clicked_element.find('.orderBlokBonGedeelte'),  animateTime = 500;  if(open.height() == 0){  autoHeightAnimate(open, animateTime);  } else {  open.stop().animate({ height: '0' }, animateTime);  }  });  }    function autoHeightAnimate(element, time){  var curHeight = element.height(), // Get Default Height  autoHeight = element.css('height', 'auto').height(); // Get Auto Height  element.height(curHeight); // Reset to Default Height  element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height  }