JavaScript Animation (FadeIn)

  • Guten Morgen,


    Ich habe da mal ein kleines Problemchen.


    Aktuell möchte ich gerne mit der "FadeIn" Animation einen Alert einblenden lassen, der danach wieder verschwindet.

    Das FadeOut funktioniert super.

    Nur das "FadeIn" möchte nicht so gerne. Es blendet sich ruckartig ein. Ohne Animation.

    Ich habe gehofft das ich hier vielleicht eine Lösung dafür bekomme.


    Code
    1. <script>
    2. setTimeout(function() {
    3. $('#errorAusgabe2').fadeIn(1000);
    4.         document.getElementByID("errorMsg2").innerHTML("Dies ist ein Alert!");
    5. }, 100);
    6. setTimeout(function() {
    7.         $('#errorAusgabe2').fadeOut(1000);
    8.     }, 5100);
    9. </script>


    Code
    1. <div id="errorAusgabe2" class="alert alert-info alert-with-icon" style="padding: 7px 2px 7px 2px; width: 50%; margin-left: 15px" data-notify="container">
    2.     <button type="button" aria-hidden="true" class="close" data-dismiss="alert">
    3.         <i class="nc-icon nc-simple-remove"></i>
    4.     </button>
    5. <span id="errorMsg2" data-notify="message" style="margin-left: 2%"></span>
    6. </div>


    Hat jemand einen Tipp für mich?

  • Was soll der Blödsinn mit Jquery und Vanilla mischerrei ?

    Benutze einfach eine Variante dann ist es übersichtlicher.

    Außerdem ist das ID falsch geschrieben.

    Dein SetTimeout brauchst du auch nicht, dafür gibt es delay bei jquery.

    Code
    1. $("#errorAusgabe2").delay(200).fadeIn(1000, function (){
    2. $('#errorMsg2').val("Dies ist eien Message Box");
    3. $(this).delay(5000).fadeOut(1000);
    4. })

    Es ist auch vorteilhaft document.ready() zu nutzen .

    Code
    1. $(document).ready(function(){
    2. $("#errorAusgabe2").delay(200).fadeIn(1000, function (){
    3. $('#errorMsg2').val("Dies ist eien Message Box");
    4. $(this).delay(5000).fadeOut(1000);
    5. })
    6. })
  • Leider funktioniert das ganze nicht.
    Liegt es vllt daran das ich das ganze in einem PHP Script habe?

    Ich habe nämlich ein Upload Script und das Alert soll kommen wenn eine Datei hochgeladen wurde. (Ja meine IDs sind dementsprechend nicht angepasst)
    Hab die unten nun angepassst


    So sieht es aktuell aus:


    PHP
    1. <?php if(isset($ausgabe)) { ?>
    2.     <div id="succesAusgabe" class="alert alert-info alert-with-icon" data-notify="container">
    3.         <button type="button" aria-hidden="true" class="close" data-dismiss="alert">
    4.      <i class="nc-icon nc-simple-remove"></i>
    5.         </button>
    6. <span id="successMessage" data-notify="message" style="margin-left: 2%"></span>
    7.     </div>
    8. <?php } ?>


    Also er blendet den Alert halt ein aber auch wieder nur Ruckartig. Entfernen tut es ihn diesmal nicht. Und einen Text fügt er auch nicht hinzu.

  • He , was soll das den werden?

    Du musst eigentlich deinen Code

    Code
    1. <script>
    2. setTimeout(function() {
    3. $('#errorAusgabe2').fadeIn(1000);
    4. document.getElementByID("errorMsg2").innerHTML("Dies ist ein Alert!");
    5. }, 100);
    6. setTimeout(function() {
    7. $('#errorAusgabe2').fadeOut(1000);
    8. }, 5100);
    9. </script>

    in den ändern

    Code
    1. <script>
    2. $(document).ready(function(){
    3. $("#errorAusgabe2").delay(200).fadeIn(1000, function (){
    4. $('#errorMsg2').val("Dies ist eien Message Box");
    5. $(this).delay(5000).fadeOut(1000);
    6. })
    7. })
    8. </script>

    Dann sollte das auch schon laufen.

    Das, was du da machst, klappt so eigentlich nicht .

    Erstens sehe ich kein Echo , da wo du das Script ins HTML einfügst.

    Die andere Frage ist auch , ob das der richtige Weg ist?

    Wie sieht den rest Code aus , oder ist das alles ?