Я использую значения массива, они должны отображаться в div. В этом разделе я хочу добавить фоновое изображение в span. Моя проблема в том, что я хочу скрыть фоновое изображение через 5 секунд, используя только CSS. Я использую некоторые методы, они не скрывают фоновое изображение. Это мой код,
<div id='remove_elem' data-bind='template: { foreach: showRacer }'>
<div style="width: 50%;" data-bind='attr: { "class": "planet "}'>
<span data-bind='attr: {"id": id }' class="downImg"></span>
<div class="left" data-bind='text: id'></div>
<div class="right" data-bind='text: rank'></div>
</div>
</div>
файл сценария,
$(document).ready(function(){
var PlanetsModel = function() {
self.Racer = ko.observableArray([
{ id: "Racer-101", rank: "5"},
{ id: "Racer-102", rank: "2"},
{ id: "Racer-103", rank: "1"},
{ id: "Racer-104", rank: "4"},
{ id: "Racer-105", rank: "7"},
{ id: "Racer-106", rank: "8"},
{ id: "Racer-107", rank: "9"},
{ id: "Racer-108", rank: "3"},
{ id: "Racer-109", rank: "6"}
]);
//var newData = self.Racer();
console.log("First array : " + JSON.stringify(self.Racer()));
this.showRacer = ko.computed(function() {
return self.Racer();
}, this);
};
ko.applyBindings(new PlanetsModel());
});
CSS стиль,
<style>
.downImg {
width: 10px;
height: 14px;
background: url(http://pariharam.info/skgmailer/down_arrow.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
</style>
Это мой пример кода, они должны отображать изображение, но не скрывать изображение через 2 секунды. Как это возможно в css ..