元素淡入淡出效果实现

时间:2022-07-22
本文章向大家介绍元素淡入淡出效果实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

html代码:

 <div class="aui-list-item-title loadcheck" v-bind:data-id="item.JianChaID">

 js代码:

 1  //初始化事件
 2             initEvent: function () {
 3 
 4                 var that = this;
 5                 $('#ullist').delegate('div.loadcheck', 'click', function () {
 6 
 7                     var ckid = $(this).attr("data-id");
 8                     that.loadCheckDetail(ckid);
 9                     var lastshow = that.lastshow;
10                     var obj = $('section[data-id="' + ckid + '"]');
11                     if (!lastshow) {
12                         obj.fadeIn(300);
13                         that.lastshow = ckid;
14                         return;
15                     }
16 
17                     if (lastshow == ckid) {
18                         obj.fadeOut(200);
19                         that.lastshow = '';
20                         return;
21                     }
22 
23                     $('section[data-id="' + lastshow + '"]').fadeOut(200, function () {
24                         obj.fadeIn(300);
25                         that.lastshow = ckid;
26                     });
27 
28                 });
29             },