Здравствуйте.
Решил написать свой микрофреймворк и столкнулся с небольшой проблемой при создании одного из модулей для вращения какого-либо контента.
Вот код модуля:
// Micro module rotate some contents
// [element] :: ( #parents fixed container -> .slide selector )
rotate: function(e,c,t) {
var e = this.htmlObj(e);
var t = t || 3000;
var ind = 0;
setInterval(function() {
e[ind].style.zIndex++;
$.callback(c, e[ind]);
if(ind++ >= e.length - 1) {
for(var i in e) e[i].style.zIndex = 0;
ind = 0;
};
}, t);
},
htmlObj: function(e) {
return this.isO(e) ? e : this.get(e);
},
Вот пример вращаемого конетнта:
<div id="presentation">
<p>lorem.</p>
<p>ipsum.</p>
<p>dolor.</p>
</div>
А вот стили отображения:
Код:
|
/* rotation */
#presentation {
border-radius: 8px;
position: relative;
margin: 20px 0;
padding: 12px;
height: 90px;
width:95%;
}
#mainContents #presentation p {
box-shadow: 0 0 5px #999;
background: #FFFFFF;
position: absolute;
border-radius:8px;
padding: 10px;
top: 0px;
} |
Что происходит в Internet Explorer и Edge браузерах:
после первого срабатывания и корректного изменения zIndex у свойств HTML-элементов, при повторных итерациях, браузер как бы не обращает внимания на обхъекты и zIndex перестает меняться вообще
.
В Opera, Firefox, Android browser, Chrome и Safari все работает великолепно! Помогите мне пожалуйста устранить эту ошибку в браузере IE и Edge. Хотя бы в Edge так как писать я буду еще долго, а осел к тому времени, я надеюсь, сдохнет окончательно.