Постепенно использовать jQuery, удерживая позицию

Question

Постепенно использовать jQuery, удерживая позицию

0

Что у меня в настоящее время

В настоящее время у меня есть текст, который начинается как display:none, и я использую jQuery для fadeIn() текста. Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку текст центрирован, поскольку каждое слово затухает, положение слов на линии продолжает двигаться (они центрируются по мере роста абзаца).

Я понимаю, почему это происходит. Я использую display:none. Итак, я пытаюсь использовать invisibility:hidden вместо этого, так что все слова сохраняют свою конечную позицию на странице.

Моя проблема продвигается вперед

Проблема, с которой я столкнулся, заключается в том, что когда я переключаюсь на invisibility:hidden, я не могу найти способ угаснуть содержимое. Я использовал предложение, сделанное в этом сообщении ЗДЕСЬ, но, к сожалению, это, похоже, дает мне тот же эффект, что и у меня в настоящее время.

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

Мой код

HTML

<div class="center">    
<h1 id="cfs">Charles Samet</h1>
    <p class="intro">
        <span id="fade1">Husband.</span>
        <span id="fade2">  Father.</span>
        <span id="fade3">  Computer Geek.</span>
        <span id="fade4">  Welcome to my world...</span>
    </p>
</div>

CSS

.center {text-align:center}
#fade1, #fade2, #fade3, #fade4 {display:none; font-size:125%;}
#cfs {display:none}

JQuery

$(document).ready(function() {
    $('#cfs').fadeIn(2500);
    $('#fade1').delay(3000).fadeIn(2000);
    $('#fade2').delay(5000).fadeIn(2000);
    $('#fade3').delay(7000).fadeIn(2000);
    $('#fade4').delay(9000).fadeIn(2000);           
});

И вот демо-версия CodePen текущей функции: http://codepen.io/anon/pen/xocyw/

И вот CodePen того, что я пробовал, используя невидимость: скрытый, без успеха: http://codepen.io/anon/pen/KdlHJ/

Charlie74 29 март 2014, в 17:00

Источник

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Shomz · Accepted Answer · 2014-03-29T13-56-00.000Z

Вам нужно анимировать непрозрачность. Таким образом, вы избежите display: none и получите те же результаты.

CSS

element {
    opacity: 0;
}

JQuery

$(element).animate({opacity: 1});

См. Здесь: http://jsfiddle.net/H6jts/

И кстати. нет invisibility правила, но visibility.

Вот рабочая версия вашего примера: http://jsfiddle.net/3js5e/

Отлично, спасибо ... работает именно так, как мне нужно. Я определенно буду держать это в моей сумке уловок. Еще раз большое спасибо.
Пожалуйста, я рад, что смог помочь. :)