Question

我在尝试实现jQuery效果方面遇到了轻微问题。我想要一个fadeIn的列表，当用户再次点击按钮fadeOut和fadeIn时，它就会显示为令人耳目一新。

我在JSFiddle中获得了代码：

https://jsfiddle.net/javacadabra/qtppk74p/3/

基本上HTML结构如下，3个按钮，取决于按下哪个按钮决定要显示哪个li。

<p>Please Choose a Job Category:</p>
<div id='sales' class='jbtn'>Sales Jobs</div>
<div id='it' class='jbtn'>IT Jobs</div>
<div id='hr' class='jbtn'>HR Jobs</div>
<div id='jobs-list'>
     <h2 id='jobs-title'></h2>
    <ul id='the-jobs-list'></ul>
</div>

JQuery检查点击了哪个按钮，并刷新添加新li元素的列表。

$('#sales').click(function () {
    refreshList()
    $('#jobs-title').html("Sales Jobs");
    $('#the-jobs-list').append("<li>Sales Job 1</li>");
    $('#the-jobs-list').append("<li>Sales Job 2</li>");
    $('#the-jobs-list').append("<li>Sales Job 3</li>");

});
$('#it').click(function () {
    refreshList()
    $('#jobs-title').html("IT Jobs");
    $('#the-jobs-list').append("<li>IT Job 1</li>");
    $('#the-jobs-list').append("<li>IT Job 2</li>");
    $('#the-jobs-list').append("<li>IT Job 3</li>");
});
$('#hr').click(function () {
    refreshList()
    $('#jobs-title').html("HR Jobs");
    $('#the-jobs-list').append("<li>HR Job 1</li>");
    $('#the-jobs-list').append("<li>HR Job 2</li>");
    $('#the-jobs-list').append("<li>HR Job 3</li>");
});

function refreshList() {
    $('#the-jobs-list').fadeOut();
    $('#the-jobs-list').empty();
    $('#the-jobs-list').fadeIn();
}

目前，我得到一个不寻常的效果，即附加列表项，然后淡出并淡入。理想情况下，我希望在添加项目之前淡出。

如果你看看我的小提琴，你会看到我的意思。

Answer 1

使用fadeOut回调。

Updated fiddle

本质上，不是让它们全部一起运行，而是让数据更新，然后通过在回调函数中执行这些操作来淡入，只有在淡出完成后才会触发。

$('#the-jobs-list').fadeOut(400, function () {
    $('#the-jobs-list').empty();
    $('#jobs-title').html("Sales Jobs");
    $('#the-jobs-list').append("<li>Sales Job 1</li>");
    $('#the-jobs-list').append("<li>Sales Job 2</li>");
    $('#the-jobs-list').append("<li>Sales Job 3</li>");
    $('#the-jobs-list').fadeIn();
});

在the docs中，它命名为complete参数。

JQuery刷新列表效果 - FadeOut FadeIn问题

1 个答案: