JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div data-bind='inOut: item'>
</div>
JavaScript
ko.bindingHandlers.inOut = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.html.init(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).show();
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.html.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).fadeIn(1500);
window.setTimeout(function() { $(element).fadeOut(1500); }, 1500);
}
};
var vm = function() {
var me = this;
me.items = [ 'One', 'Two', 'Three' ];
me.item = ko.observable();
me.index = 0;
me.runLoop = function() {
me.item(me.items[me.index++]);
if( me.index == me.items.length(0))
{
me.index = 0;
}
window.setTimeout(me.runLoop, 3000);
};
}
var viewModel = new vm();
ko.applyBindings(viewModel);
viewModel.runLoop();