Wie Alarmbenachrichtigung von rechts nach links angezeigt wird und nach einigen Sekunden ausblenden

Question

Ich versuche, Alarm von der rechten Seite nach links anzuzeigen, und nach wenigen Sekunden möchte ich diese Warnung ausblenden. Jetzt Alarm von rechts nach links kommend aber es beginnt nicht richtig rechts Ich meine das erste Mal Alarm wird ausgeblendet und wenn die Seite aktualisiert wird es von der rechten Seite kommen und ich muss 300px von rechts nach links animieren und verstecken nach einige Sekunde. Würdest du mir dabei helfen?

$(".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

Ihre js Code ändern zu:

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