JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.dataviz.core.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.dataviz.chart.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<div id="calendar"></div>
<div id="barcode"></div>
<div class="k-block k-success-colored" id="SuccessNotification" style="display:none">Status erfasst</div>
<button id="effectStarterBtn">Show Notification</button>
JavaScript
$(document).ready(function() {
// create Calendar from div HTML element
$("#calendar").kendoCalendar();
$("#barcode").kendoBarcode({
value:"123456",
border: {
width: 2,
dashType: "solid",
color: "black"
}
});
$("#effectStarterBtn").on("click", function(e) {
var el = $("#SuccessNotification"),
effectFadeIn = kendo.fx(el).fadeIn().duration(1000),
effectFadeOut = kendo.fx(el).fadeOut().duration(1000);
effectFadeIn.play().then(function () {
setTimeout(function () {
effectFadeOut.play();
}, 3000);
});
});
});