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');
    });
});

Однако это останавливает работу кода. У кого-нибудь есть идеи как это решить?

Благодарю.

РЕДАКТИРОВАТЬ:

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

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

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

<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');
            });
        });
    });

});