liuzeyu12a

引入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

分类:

技术点:

相关文章: