仅在AJAX查询返回特定结果时才播放CSS动画

I have a div showing an alert count. Currently the div is updated via a jQuery script refreshing it every five seconds and displaying the count. If the count is zero the div displays the message “Currently no new alerts” and displays in green, while if there are 1 or more alerts the div is displayed in red and the number of alerts is displayed.

I currently have something like this:

<script>
    setInterval(function() {
        $("#alertWrap").load(location.href + "#alertWrap>*","");                    
    }, 5000);
</script>   

<div class="alertWrap" id="alertWrap">
    <?php
        $alertcountCheckQ = mysql_query("SELECT COUNT(alert_status)numerOfAlerts FROM alerts WHERE alert_status = 'unacknowledged'");
        $alertcountCheckR = mysql_fetch_object($alertcountCheckQ);

        if ($alertcountCheckR->numerOfAlerts >= 1) {
            echo "<div class=\"alertContentContainer redBackground\">$alertcountCheckR->numerOfAlerts new alert(s)</div>";
        } else {
            echo "<div class=\"alertContentContainer greenBackground\">Currently no new alerts</div>";
        }
    ?>
</div>

I would like to apply a CSS animation to the content of the div when there’s a new alert – a flash perhaps to grab people’s attention – however, I can’t figure out how this would be done without the animation firing every time the div is refreshed.

You can do something like this with css3 animations (wait 2 seconds for the effect). You just need to call the function which add the class .pulse and remove it after 4 seconds:

Note I show you the pulse effect only, not the logic because I assome that you handle with it. The demo show you only what you do after you know that you need to take the user's attention.

setTimeout(function() {
  pulse(1);
}, 2000);

function pulse(counter) {
  $('#total').html(counter);
  $('.alerts').addClass('pulse');  
  setTimeout(function() {
    $('.alerts').removeClass('pulse');  
  }, 4000);
}

.alerts {
  margin:50px;
  display:inline-block;
}

.pulse {
  outline: rgba(191, 28, 86, 1) solid 2px;
  animation:pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    outline-offset:0;
    opacity:1;
  }
  
  100% {
    outline-offset:10px;
    outline-color:rgba(191, 28, 86, 0)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="alerts">
  <span id="total">0</span> alerts
</span>

</div>

You could supply a callback function as the third argument to .load(). That function would be run after the new contents are attempted to be loaded from the server. In that function, if new alert status was successfully loaded, check the contents that were loaded using the first parameter, responseText. If the contents have a new alert, run the animation.

The following example code doesn’t use CSS animation, but rather the jQuery functions fadeOut and fadeIn to flash twice. But you can customize flashElement to do whatever you want, such as adding a class to that element, where there is already CSS to make elements with that class flash.

setInterval(function() {
    $("#alertWrap").load(location.href+"#alertWrap>*", "", function(responseText, textStatus) {
        if (textStatus === "success" && responseContainsNewAlerts(responseText)) {
            flashElement($("#alertWrap"));
        }
    });
}, 5000);

function responseContainsNewAlerts(responseText) {
    return responseText.indexOf("redBackground") !== -1;
}

function flashElement($element) {
    var flashDelayMs = 200;
    var numFlashes = 2;
    for (var i=0; i < numFlashes; i++) {
        $element.fadeOut(flashDelayMs).fadeIn(flashDelayMs);
    }
}

you could add Jquery code that runs when the alerts are refreshed and changes the CSS of the alerts to animate if there is a new alert, and to remove the CSS animation if there isn't one.

if (thereIsANewAlert){
  $(".alertContentContainer redBackground").css("animation-name","example");
  $(".alertContentContainer redBackground").css("animation-duration","4s");
}else{
  $(".alertContentContainer redBackground").css("animation-name","");
  $(".alertContentContainer redBackground").css("animation-duration","");
}  

However i would recommend simply animating Via Jquery like this example:

   if (thereIsANewAlert){
      $(".alertContentContainer redBackground").animate({left: '100px'});
   }