引入Semantic UI框架:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
HTML:
<div class="ui message">
<i class="close icon"></i>
<div class="header">
Welcome back!
</div>
<p>This is a special notification which you can dismiss if you\'re bored with it.</p>
</div>
js有两种写法:
方法1:
$(\'.message .close\')
.on(\'click\', function() {
$(this)
.closest(\'.message\')
.transition(\'fade\') //fade消失动画
;
})
;
方法2:
$(\'.message .close\').
click(function () {
$(this).
closest(\'.message\').
transition(\'fly\');
});
注意:
$(’.message .close’) 其中message后面有一个空格,然后.close
参考Semantic ui官网:https://semantic-ui.com/collections/message.html