Fade in and out text и repeat [duplicate]

$username = $_POST['username'];
$password = $_POST['password'];
$result = mysql_query("SELECT * FROM Users WHERE UserName LIKE '%$username%'") or die(mysql_error());

while($row = mysql_fetch_array($result))
{
    echo $row['FirstName'];
}

Иногда подавление запроса как @mysql_query(your query);

14
задан BSMP 28 December 2015 в 18:38
поделиться

4 ответа

DEMO

Возможное решение с чистым css!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}
10
ответ дан rkpasia 23 August 2018 в 19:39
поделиться

Что-то вроде этого:

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Примечание: это работает только с переключением 2-х слов, может быть лучше иметь массив слов и написать функцию, чтобы перебрать их и применить «fadeIn / fadeOut анимация.

Редактирование: вот решение для нескольких слов - https://stackoverflow.com/a/2772278/2470724 использует array для хранения каждого слова и затем перебирает их.

Редактировать 2: Решение без массива: http://jsfiddle.net/kMBMp/ Эта версия проходит через un-ordered list, у которого есть display:none на нем

4
ответ дан Community 23 August 2018 в 19:39
поделиться

Некоторые обширные поиски и эксперименты Google привели меня к тому, что я могу ответить на свой вопрос и как раз вовремя!

Если кто-то из вас хотел бы знать, как это можно сделать, этот фрагмент CodePen я написал: http://codepen.io/AmruthPillai/pen/axvqB

6
ответ дан OGHaza 23 August 2018 в 19:39
поделиться

Самый низкий подход к усилиям, вероятно, заключается в использовании плагина Morphext jQuery:

https://github.com/MrSaints/Morphext

Он работает от animate.css, поэтому легко изменить стиль анимации текста.

Если вы ищете что-то более мощное (можете указать в анимации AND, анимировать не только текст), есть выделение Morphist:

https://github.com/MrSaints/Morphist

1
ответ дан Tony He 23 August 2018 в 19:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: