Сделать текст невидимым (постепенно) jQuery

@Кэти · Регистрация: 19.11.2014

Студворк — интернет-сервис помощи студентам

Привет!
Не могли бы помочь?
Есть текстовое поле. При нажатии на кнопку текст в этом текстовом поле должен стать постепенно невидимым.
У меня получилось сделать только, что бы само тестовое поле становилось невидимым.

JavaScript
1
$(":text").fadeToggle();

@sash · 19.11.2014, 19:25

Это тебе нужно делать через addClass(".text") делаешь тупо через css

CSS
1
2
3
4
.text{
        opacity: 0;
        transition:all 2s linear;
    }

В параметре втором (2s) transition укажи сколько секунд тебе будет достаточно)
И потом его добавляешь к элементу

JavaScript
1
2
3
4
5
$('#твой кнопка id').click(function(){
 
$('твой текст id').addClass('text');
 
});

Добавлено через 22 минуты
Кэти, но лучше через toggleClass

@Кэти · 19.11.2014, 20:34 **[ТС]**

Сообщение от sash

Кэти, но лучше через toggleClass

Я сделала, спасибо)
Но все равно получается, что само поле вместе с текстом становится невидимым.
а мне нужно, что бы поле оставалось, пропадал только текст. возможно ли такое?

@sash · 19.11.2014, 21:09

Кэти,Не, текст сам по себе не изменяется на начальном этапе ученичества.. Всё возможно с оЙгукн {jQuery))) это тебе надо сделать два спана вложенных типа так
для начала подключи jquery ui http://jqueryui.com/ она такими вещами в основном занимается. после основной джейквери, которая уже у тебя подключена подключишь с распакованного архива jquery-ui.min.js, остальное выбрось пока

стили #first{какие-нибудь стили, например бэкграунд}
#second{тоже какой-то стиль там цвет, размер шрифта и т.д}

и твоё самое:
<span id="first"><span id="second">Твой текст</span></span>
<button id="knopa">Я кнопка

</button>

JavaScript
1
2
3
4
5
$('#knopa').click(function(){
 
$('#second').switchClass( "text", "text2", 1000 );
 
});

и создаёшь 2 класса
.text{opasity:0;}
.text2{opasity:1;}
И теперь при клике на кнопку будут меняться два класса с переходом в 1000 милисекунд. хочешь больше ставь больше (или меньше)

Или просто один спан сделай, смотри по обстоятельствам что тебе нужно. Если что, пиши

@Кэти · 20.11.2014, 12:39 **[ТС]**

sash, спасибо)
буду пробовать)

Добавлено через 11 часов 48 минут
sash, может я не поняла, но мне нужна текст именно в текстовом поле изменить.

HTML5
1
<input type="text"  value=' Больше улыбайся'/>

@sash · 20.11.2014, 12:53

Кэти, С плавным изменением текста в поле ещё не сталкивался) Подумаю

@Lazy_Den · 20.11.2014, 13:16

Кэти, смотрите такой вариант

HTML5
1
2
<input class="inp" type="text"  value=' Больше улыбайся'/>
<button>Click me</button>

CSS
1
2
3
4
5
6
7
8
.inp {
    color: rgba(0,0,0,0);
    -webkit-transition: all 1s;
    transition: all 1s;
}
.fade-toggle-text {
    color: rgba(0,0,0,1);
}

JavaScript
1
2
3
$('button').click(function(){
    $('.inp').toggleClass('fade-toggle-text');
});

@Кэти · 20.11.2014, 17:04 **[ТС]**

Lazy_Den, большое спасибо)
то что надо!

@sash · 20.11.2014, 18:07

я б не додумался

Полез в val() Рановато ещё отвечать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	20.11.2014, 12:53
	Кэти, С плавным изменением текста в поле ещё не сталкивался) Подумаю 0

@Кэти 0 / 0 / 0 Регистрация: 19.11.2014 Сообщений: 24
	20.11.2014, 17:04 [ТС]
	Lazy_Den, большое спасибо) то что надо! 0

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	20.11.2014, 18:07
	я б не додумался Полез в val() Рановато ещё отвечать 0