У меня есть div текста (#text-write), каждый символ которого span нед.div absolute ly position ed внутри relative ly position ed контейнера div (#typetext).Вот предполагаемый эффект:
- Анимация внутреннего
div (#text-write) до opacity 0 в течение 400 мс. - Анимация каждого
span внутри внутреннего div один последругие opacity 1 для 400 мс каждый. - Пауза на 5 секунд.
- Вернитесь к 1.
Я просто не могу заставить это работать в IE8,Он работает в IE7 и ниже, IE9, других основных и малоизвестных (насколько я знаю) браузерах.Я дергал себя за волосы, пробуя все, что нашел в сети (добавьте макет к absolute ly position ed inner div, поиграйте с filter, попробуйте исчезнуть и т. Д.) За последние 5 иличасов.
Логика работает (я попытался вставить alert в рекурсивный вызов, и IE8 делает alert для каждой span ned буквы и в точное время, даже пауза), в консоли тоже нет ошибок.
Но с opacity ничего не происходит.Он даже не исчезает.Он просто остается там.
Вы можете помочь?
jQuery(function() {
// span each letter in text
var textType = jQuery('#text-write').remove().text(), textTypeLength = textType.length,
fadeSpeed = 400, fadePause = 5000,
textSpanned = '';
for (i=0;i<textTypeLength;i++) textSpanned += '<span>' + textType.charAt(i).replace(' ',' ') + '<\/span>';
jQuery('#typetext').append('<div id="text-write">'+ textSpanned + '<\/div>');
// fade phrase logic
function fadeType(){
var letters = jQuery('#text-write span').animate({opacity: 0}, fadeSpeed),
i=0;
(function(){
jQuery(letters[i++]).animate({opacity: 1}, fadeSpeed, arguments.callee);
})();
}
// make it happen
fadeType();
setInterval(function(){fadeType();},fadePause + fadeSpeed + (textTypeLength*fadeSpeed));
});