JavaScript выцветания Content

На этом сайте я хочу исчезать/анимации некоторые вещи, когда открытие сайта: http://www.coaching-starnberg.de/neu JavaScript выцветания Content

Для Поступая таким образом, я использую этот фрагмент кода:

$(document).ready(function() { 
$('img.start').each(function(index) { 
if (index == 0) { index = 1; index+=1;} 
$(this).animate({opacity: "0.0"}).delay(600*index).animate({opacity: "100.0"}, 9999); 
index+=1; 
});

HTML, состояние элементы становятся видимыми и скрываются через JavaScript. Я использовал это, потому что я хотел быть всем видимым для случая, JavaScript отключен в браузере.

Теперь я заметил, что время перед JavaScript скрывает элементы довольно долго. Значение, вы видите все, что появляется на долю секунды, прежде чем она скрыта, а затем исчез в.

Как я уменьшить этот временной промежуток, так что содержание не отображается первым? `

Спасибо, ребята!

источник

2013-09-29 Max

Проблема в том, что вы показываете элементы по умолчанию, и вы скрываете их (и начинаете замирание) после загрузки всего документа.

Вместо этого вы должны использовать решение no-javascript, которое не зависит от загружаемого документа. Широко используемый метод, чтобы добавить класс «не-JS» в <html> элемента, а в <head> вы запускаете скрипт, который просто делает это:

document.getElementsByTagName('html')[0].className = "";

Тогда в CSS, вы можете установить все элементы вы хотите невидимы, и для каждого просто добавить:

.no-js [element] { 
    visibility: visible; 
}

Как только <head> в настоящее время анализируется браузером и JavaScript включен, «нет-JS» класс будет удален из элемента HTML.

источник

2013-09-29 13:20:59

Спасибо за ваш быстрый ответ Стефан, решение класса no-js звучит сладко! Я углубится в это, но я думаю, это решит все мои вопросы. – Max

Пока вы используете JavaScript для этого, у вас всегда будет задержка. Сначала вам нужно скрыть свой контент с помощью CSS. Это потому, что вы полагаетесь на свою логику на $ (document) .ready. Это означает, что браузер сначала загружает html, css и весь javascript, а затем начинает выполнение вашего js-кода. В общем, такие вещи следует делать с помощью CSS.

источник

2013-09-29 13:20:26 Krasimir

Благодаря Красимир, Ваш ответ помог мне понять корень проблемы. – Max

Ответ Стефана Мюллера был решением.

Но для моих нужд я нашел более простой в использовании CSS3 Keyframes:

.element { animation: fadein 2s; 
-moz-animation: fadein 2s; /* Firefox */ 
-webkit-animation: fadein 2s; /* Safari and Chrome */ 
-o-animation: fadein 2s; /* Opera */ 
} 
@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { /* Firefox */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-o-keyframes fadein { /* Opera */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity: 1; 
    } 
}

источник

2013-10-01 19:03:01 Max

Это хороший подход. В настоящее время я работаю над сайтом, которому требуется предупреждение no-js, и я думал о том, чтобы сделать то же самое, чтобы добавить немного дополнительной задержки :) –

JavaScript выцветания Content

ответ

Смежные вопросы