✔ Live Notification mit Jquery

[dennis-sauer]

Der BounceIn erscheint beim Laden der Seite, sieht natürlich besser aus, als ein einfaches erscheinen.

Nehm ich die ganze Zeile raus, erscheint nur beim Ergänzen oder Löschen eines Eintrages das Badge. Nehm ich den addClass ... bounceIn Teil raus, ist quasi alles richtig, nur ohne Anfangsanimation

 

[ComFreek]

Wenn es beim Laden der Seite erscheinen soll, wieso ist dann die Zeile innerhalb des success-Callbackhandlers der AJAX-Anfrage? Das ergibt keinen Sinn.
Pack die Zeile vor die AJAX-Anfrage:

$('.notifications-count').html(data).addClass('animated bounceIn');

// var nicht vergessen
var oldValue = null;

function repeatMe() {
  $.ajax({
    url: 'test.php',
    success: function(data) {
      // Wenn neuer Wert sich vom alten unterscheidet
      if (oldValue != null && data != oldValue) {
          $('.notifications-count').removeClass('animated bounceIn');
          $('.notifications-count').addClass('animated wobble');
      }
      oldValue = data;
    }
  });
}

setInterval(repeatMe, 1000);

Übrigens habe ich deinen Code auch noch gekürzt.

 

[dennis-sauer]

Wenn es beim Laden der Seite erscheinen soll, wieso ist dann die Zeile innerhalb des success-Callbackhandlers der AJAX-Anfrage? Das ergibt keinen Sinn.

Ja macht Sinn

Pack die Zeile vor die AJAX-Anfrage:

data hole ich ja aber erst innerhalb der function repeatMe, da wird ja jetzt nichts angezeigt. Wie schaut das denn mit dem Laden aus, wenn ich jetzt vorher nochmal data besorge?

Übrigens habe ich deinen Code auch noch gekürzt.

Danke!

 

[ComFreek]

Wenn ich dich nun richtig verstehe, willst du beim ersten Laden von Daten den bounceIn-Effekt abspielen. Da wir sowieso schon oldValue haben, was am Anfang null ist, können wir dieses ja gleich benutzen:

// var nicht vergessen
var oldValue = null;

function repeatMe() {
  $.ajax({
    url: 'test.php',
    success: function(data) {
      // Erstes Laden
      if (oldValue == null) {
        $('.notifications-count').html(data).addClass('animated bounceIn');
      }
      // Weitere Ladevorgänge, bei denen sich der neue Wert unterscheidet
      else if (data != oldValue) {
          $('.notifications-count').removeClass('animated bounceIn');
          $('.notifications-count').addClass('animated wobble');
      }
      oldValue = data;
    }
  });
}

setInterval(repeatMe, 1000);

Mir ist des Weiteren aufgefallen, dass data nur beim ersten Mal zugewiesen wird. Ich denke mal, dass du data bei jedem Ladevorgang anzeigen willst:

// var nicht vergessen
var oldValue = null;

function repeatMe() {
  $.ajax({
    url: 'test.php',
    success: function(data) {
      $('.notifications-count').html(data);
      // Erstes Laden
      if (oldValue == null) {
        $('.notifications-count').addClass('animated bounceIn');
      }
      // Weitere Ladevorgänge, bei denen sich der neue Wert unterscheidet
      else if (data != oldValue) {
          // Auf eine Zeile gekürzt
          $('.notifications-count').removeClass('animated bounceIn').addClass('animated wobble');
      }
      oldValue = data;
    }
  });
}

setInterval(repeatMe, 1000);

Noch ein Vorschlag: $('.notifications-count') irgendwo zwischenspeichern. Ansonsten wird immer wieder nach dem Element gesucht.

 

[dennis-sauer]

Auf den ersten Blick sieht dein Code gut aus, kapier sogar ich soweit... Interessanterweise (ich hab jetzt mal den zweiten genommen) gibt es den Effekt hier nur beim ersten mal.

Also Ergebnis jetzt:

- bounceIn Animation beim Laden der Seite
- wobble Animation beim erhöhen oder verringern der Einträge in der DB (einmalig nach dem Laden)

Erhöht oder verringert sich der Wert nun erneut (ohne das in der Zwischenzeit die Seite neugeladen wurde) passiert "nichts". Der Wert verändert sich, es wird aber nicht animiert!

 

[ComFreek]

Ich kenne mich mit jQuery-Animationen nicht wirklich aus, aber vielleicht musst du analog zu deiner removeClass-Lösung noch die wobble-Klasse entfernen:

// ...
$('.notifications-count').removeClass('animated bounceIn wobble').addClass('animated wobble');
// ...

 

[dennis-sauer]

So ich habe es endlich geschafft. Ob die Lösung elegant ist, weiß ich nicht, aber es klappt!

Hier der abschließende Code:

var oldValue = null;
function repeatMe() {
  $.ajax({
    url: 'test.php',
    success: function(data) {
      $('.notifications-count').html(data);
      // Erstes Laden
      if (oldValue == null) {
        $('.notifications-count').addClass('bounceIn');
      }
      else if (data != oldValue) {          
          $(".notifications-count").removeClass('bounceIn').addClass("wobble").delay(1000).queue(function(next){
                $(this).removeClass("wobble");
                next();
            });
         
      }
      oldValue = data;
    }
  });
}
setInterval(repeatMe, 30000);

Danke für deine ganze Hilfe!