Как добавить текст и CSS с помощью jquery

Question

Как добавить текст и CSS с помощью jquery

0

То, что я хочу сделать, это изменить текст и css div на определенное количество времени, затухая в и из следующего текста и css.

Когда форма отправляется, я хочу добавить класс в div, затухать в css и новый текст, который "Number успешно добавлен" в течение примерно 3 секунд, затем затемнить этот текст и удалить css и поместить старый текст назад на свое место.

Мой div, который будет содержать текст и должен иметь добавленный к нему класс, - это

<div id="form_result"></div>

Я пробовал это, но он не работает... может быть, логика ошибочна.

$('#form_result').html('<h3>Number successfully added!!</h3>').addClass('form_result').fadeIn('fast').delay(1500).fadeOut('fast').removeClass('form_result').html('<h3>Please enter a number:</h3>');

AdRock 23 сен. 2013, в 14:09

Источник

Теги:

jquery

css

delay

fadein

fadeout

3 ответа

1

Пожалуйста, попробуйте приведенный ниже код.

$("form").submit(function () {
    $("#form_result").hide()
    $(this).before("<span class='msg'>Number successfully added!!</span>");
    $('.msg').fadeOut(1500);
    $("#form_result").fadeIn(1500)
});

http://jsfiddle.net/Pkce8/

Надеюсь, это будет полезно.

Renjith 23 сен. 2013, в 11:53

0

В идеале я хотел бы исчезнуть одно сообщение, прежде чем исчезнуть в другом
AdRock 23 сен. 2013, в 13:38

0

Вы пытаетесь показать, что находится в

<div id="form_result"></div>

назад?

Попробуйте это

Sara 23 сен. 2013, в 11:39

Ещё вопросы

В идеале я хотел бы исчезнуть одно сообщение, прежде чем исчезнуть в другом

Saranya Sadhasivam · Accepted Answer · 2013-09-23T09-55-00.000Z

Попробуйте ниже js. Он отлично работает в JSfiddle.

ДЕМО ЗДЕСЬ

HTML

<div id="main_div">
    <span id="form_result"><h3>Please enter a number</h3></span>
</div>
<input type="button" onclick="fade_function();" value="Click" />

JS

function fade_function()
{
    $("#form_result").html("<h3>Number successfully added!!<h3>");
    $('#main_div').animate({opacity: 1.0}, 3000, function(){
        $("#form_result").html("<h3>Please enter a number</h3>");  
    });
}

Это близко к тому, что я хочу сделать, но в анимации я хочу использовать этот стиль "border: 5px solid #FFF; background: # A7FC7C;" но также через 3 секунды я хочу оживить удаляемый CSS
Вы можете применить css или addClass, используя jquery как $ ("# form_result"). AddClass ("form_result"). Проверьте скрипку jsfiddle.net/KfuAr/2