僅當AJAX查詢返回特定結果時才播放CSS動畫

我有一個顯示警報計數的div。目前，div通過一個jQuery腳本進行更新，腳本每五秒刷新一次並顯示計數。如果計數爲零，則div顯示消息「Currently no new alerts」並以綠色顯示，如果有一個或多個提醒，則div顯示爲紅色，並顯示警報的數量。僅當AJAX查詢返回特定結果時才播放CSS動畫

我現在有這樣的事情：

<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>

我想一個CSS動畫應用到div的內容時，有一個新的警報 - 閃光或許抓住了人們的注意 - 不過，我可以如果沒有每次div刷新時都會觸發動畫，我們無法知道這將如何實現。

來源

2016-05-22 MatthewBryce

描述你將如何讓人們注意到 –

你可以用css3動畫做這樣的事情（等待2秒效果）。你只需要調用它添加類.pulse功能，在4秒後刪除：

注意我只告訴你的脈衝效應，而不是邏輯，因爲我assome你用它處理。該演示僅在您知道需要引起用戶注意後才向您顯示您所做的事情。

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>

來源

2016-05-22 11:58:22

我想要的脈衝或閃光只發生一次，當警報首次出現使用這種方法，動畫將在每次div被刷新時播放。 – MatthewBryce

'只有當頁面加載時有新的提醒'！所以只需使用一次該功能。 –

對不起，我沒有解釋得很好，這是爲了一個儀表板，它將顯示在一個大的辦公屏幕上，不會與交互，所以動畫需要加載，當div第一次變紅時，div會在警報後再次變成綠色disapers和下一次警報出現時動畫需要再次觸發。因此每次div顯示爲紅色時都需要調用一次...所有頁面都不會被重新加載或更改。 – MatthewBryce

你可以提供一個回調函數的第三個參數.load()。在嘗試從服務器加載新內容之後，將運行該功能。在該功能中，如果新警報狀態已成功加載，請檢查使用第一個參數responseText加載的內容。如果內容有新警報，請運行動畫。

以下示例代碼不使用CSS動畫，而是使用jQuery函數fadeOut和fadeIn進行兩次閃爍。但是你可以自定義flashElement來做你想做的任何事情，比如向該元素添加一個類，在那裏已經有CSS來創建該類的元素。

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); 
    } 
}

來源

2016-05-22 11:59:03

你可以添加，當警報被刷新的運行，改變了警報的CSS動畫，如果有一個新的警報，如果沒有一個去除CSS動畫jQuery代碼。

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",""); 
}

但是我建議乾脆動畫通過jQuery這樣的例子：

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

來源

2016-05-22 12:04:40 ilai

僅當AJAX查詢返回特定結果時才播放CSS動畫

回答

相關問題