Question

我已经建立了一个包含成员信息下拉列表的团队页面。我遇到的问题是在每个下滑动画结束时随机出现一个生涩的结局。我在检查员中注意到鼠标输出时div元素上留有高度，我不知道这是否是问题的一部分。如何使结束动画缓和而不是卡入到位？

$(document).ready(function () {

$(".member-info").hide();
$(".member_row").hide();

$(".box").mouseenter(function () {

    $(this).closest('.member_block').children('.member_row').slideDown();
    $(this).closest('.member_block').children('.member_row').css('height', 'auto');
    $(this).closest('.member_block').children('.member_row').css('margin', 'auto');
    $(this).closest('.member_block').children('.member_row').css('display', 'block');
    $(this).closest('.member_block').children('.member_row .container .member-info').css('height', 'auto');

        var $target = $($(this).data('target'));
        $(".member_row .container .member-info").not($target).stop().slideUp();
        $target.slideDown();

});


$(".member_block").mouseleave(function () {

    $(this).closest('.member_block').children('.member_row').stop().slideUp();
    //$(this).closest('.member_block').children('.member_row .container .member-info').css('height', '0px');
    //$('.member_block .member_row').hide().css('height', '0').slideDown();
    //$('.member_block .container .member-info').hide().css('height', '0').slideDown();

    //$(this).closest('.member_block').children('.member_row').hide();
    /*$(this).closest('.member_block').hide();*/

});

});

Answer 1

答案可能在这里：slideDown jumps abruptly at the end

另外，您可以大量优化/简化代码。例如，这个块

 $(this).closest('.member_block').children('.member_row').slideDown();
 $(this).closest('.member_block').children('.member_row').css('height', 'auto');
 $(this).closest('.member_block').children('.member_row').css('margin', 'auto');
 $(this).closest('.member_block').children('.member_row').css('display', 'block');

可以写

$(this).closest('.member_block').children('.member_row')
        .slideDown()
        .css({  'height': 'auto',
                'margin': 'auto',
                'display': 'block'});

执行起来更优雅，更快（元素被提取一次，而不是四次）。

但是，你正在向下滑动一个元素并同时给它一个自动高度，不确定它是否兼容。

slideDown Div可以缓解动画而不是捕捉到位

1 个答案: