这个jquery效果要怎么写

Question

<div>用户名不存在</div>
假设这个div是一个提示，如何让这个div显示的时候能抖动一下，然后消失。

Answer 1

写了个简单的抖动，然后消失

        .box{
                line-height: 24px;
                color:red;
                text-align: center;
                position: absolute;
                top:100px;
                left:50%;
            }
<div class="box">用户名不存在</div>
        <script>
            $(function(){
                $(".box").on('click',function(){
                    $(".box").animate({left:"+=15px"},50)
                    .animate({left:"-=15px"},50)
                    .animate({left:"-=15px"},50)
                    .animate({left:"+=15px"},50)
                    .animate({left:"+=15px"},50)
                    .animate({left:"-=15px"},50,function(){
                        $(".box").css('display','none');
                    });
                    
                })
            })
        </script>

Answer 2

animation插件，网上很多，有个挺出名的动画插件官网，我找不到了，随便手机上找了一个，你可以参考参考，动画抖动后可以采用js让元素隐藏。

Answer 3

给这个div新增一个类(addClass)。
这个类的内容为抖动效果的css3动画。抖动可用translate+rotate+opacity实现。
最后设定时间再将类移除，setTimeout(时间即为动画时间)。

Answer 4

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}
.bounceOut {
  animation-name: bounceOut;
}

然后配合jQuery，效果应该就有了。

Answer 5

百度layer组件