Изменение цвета текста с помощью Jquery
Здравствуйте, пытаюсь усовершенствовать обработку формы с текстом, с помощью jquery.Скрипт выводит успешно сохраненные в БД данные,пришедшие из формы, на экран без перезагрузки страницы,если те прошли проверку на количество отправленных символов.Проект делается на php фреймворке Laravel 5.3.
Что конкретно пытаюсь сделать:при выводе на экран данных,текст должен выводиться зеленым цветом,появляться должен плавно,а по прошествии 2-3 секунд меняться на черный цвет.
С выводом текста в зеленом цвете все хорошо,но вот с анимацией не получается разобраться.Подскажите пожалуйста,как можно это организовать.Заранее спасибо.
Такой код на данный момент:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.center {
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#sendForm").submit(function (ev) {
ev.preventDefault();
$('#messageShow').hide();
var title = $("#title").val();
var fail="";
if (title.length < 3) fail="Название категории должно состоять из не менее 3 символов";
if (fail!=""){
$('#messageShow').css({'color' : 'red'});
$('#messageShow').html(fail);
$('#messageShow').show();
return false;
}
$.ajax({
url: '{{action('CategoriesController@store')}}',
type:'POST',
data:$('#sendForm').serialize(),
cache:false,
success: function () {
var neww = "new!";
$("#title").val("");
$("#new").css({'color':'red'});
$("#new").html(neww);
$("#categoryBlock").append("<h4>"+title+"</h4>").css({'color' : 'limegreen'}).show();
}
})
})
})
</script>
</head>
<body>
<div class="center">
<form method="POST" enctype="multipart/form-data" id="sendForm" action="{{action('CategoriesController@store')}}">
{{ csrf_field() }}
<input type="text" name="title" id="title" placeholder="Добавить категорию">
<input type="submit" class="btn-primary" value="Добавить" > <div id="messageShow"></div>
</form>
@if(Session::has('message'))
{{Session::get('message')}}
@endif
</div>
<br>
<div class="center">
<h3>Список категорий:</h3><br>
@foreach($categories as $category)
<h4>{{$category->title}}</h4>
@endforeach
<div id="new"></div>
<div id="categoryBlock"></div>
</div>
</body>
</html>
@endsection
$('button').click(() => {
$('#s').text("Все сохранилось!!! ))").css({
'opacity': 0,
'color': 'green'
});
$('#s').animate({
'opacity': 1
}, 1000, setBlack());
})
function setBlack() {
setTimeout(function() {
$('#s').css('color', 'black');
}, 2000);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<br>
<span id="s"></span>Как вариант, можно добавить класс, который сделает ваш текст черным, и добавлять его с таймаутом после того, как данные были получены.
Для примера написал аналогичное действие по клику.
function changeColor() {
setTimeout(
function() {
$('.main').addClass('black');
},
2000
)
}
$('.main').click(changeColor).main {
transition: all 2s;
color: green;
}
.black {
color: black
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, maiores.</div>
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
- Почему SERVER_ADDR имеет не тот IP 49981 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31908 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25942 visits
- Как через css изменить цвет png изображения? 11729 visits
- Blob video url download 11277 visits
- Php curl запрос через прокси с авторизацией 10683 visits
- Работа с captcha vk api 9479 visits
© "hostciti.net" 16.1.2026 | 04:38