slideUp и slideDown jQuery

Question

У меня есть таблица, в которой я могу щелкнуть строки() классом .details. Это покажет div с id="details" с дополнительной информацией об элементе в строке.

У меня есть следующий код.

$('.details').click(function() { 
    $('#details').slideUp('slow'); 
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function() { 
     $(this).slideDown('slow'); 
    }); 
}); 

Однако я хотел бы загрузку (.load()) случиться после .slideUp() из-за того, что нагрузка начинается в то время как элемент скользит вверх (который выглядит странно). Я попытался добавить его в качестве функции обратного вызова следующим образом:

$('#details').slideUp('slow', function() { 
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function() { 
     $(this).slideDown('slow'); 
    }); 
}); 

Однако это не позволяет коду работать. Кто-нибудь есть идея о том, как это решить?

Спасибо.

EDIT:

Моя строка таблицы выглядит следующим образом:

<tr class="details" data-id="@item.VehicleID" data-url="@Url.Action("Details", "Vehicle")"> 
</tr> 

Мой ДИВ выглядит следующим образом:

<div id="details"></div> 

Answer 1

Одна из проблем, я вижу, с кодом, вы используете $(this).data('url') для получения значения атрибута данных url, установленного в tr, которое было нажато. но $(this) на самом деле $('#details') там, потому что вы обращаетесь к нему внутри слайд-модуля $('#details'), у которого нет атрибута данных url. Поэтому вы должны получить сообщение об ошибке

Решение состоит в том, чтобы назначить $(this) (щелкнув строку) на локальную переменную и использовать ее внутри вашей другой функции обратного вызова.

Это должно сработать.

$(function() { 


    $('.details').click(function() { 
     var _this = $(this); 

     $('#details').slideUp('slow', function() { 
      $('#details').load(_this.data('url'), { id: _this.data('id') }, function() { 
       $('#details').slideDown('slow'); 
      }); 
     }); 
    }); 

});