如何从右侧到左侧显示通知警报，并在几秒钟后隐藏

Question

我正在尝试从右侧到左侧显示警报，几秒后我想隐藏该警报。现在从右到左发出警报，但它没有正确启动右侧我的意思是第一次警报将隐藏，何时刷新页面它将来自右侧，我必须从右到左显示300px动画并隐藏后一秒钟。 你能帮帮我吗？

$(".success").fadeIn()
.css({left:400,position:'absolute'})
.animate({left:0}, 800, function() {
    // $('#selector').delay(5000).fadeOut('slow'); 
});

div {
    margin-bottom: 15px;
    padding: 4px 12px;
}


.success {
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="success">
  <p><strong>Success!</strong> Some text...</p>
</div>

Answer 1

将您的js代码更改为：

showNotification();
setTimeout(hideNotification, 8000);

function showNotification() {
  $(".success")
    .fadeIn()
    .css({ right: 0, position: "absolute" })
    .animate({ left: 0 }, 1000, function() {
      // $('#selector').delay(5000).fadeOut('slow');
    });
}

function hideNotification() {
  $(".success").fadeOut("slow");
}

Demo