Пожалуйста, подскажите, как сделать анимацию появления текста, если текст меняется с помощью Jquery:
$(function () {
$("#button").hover(function (e) {
$("#text").text("text1");
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПожалуйста, подскажите, как сделать анимацию появления текста, если текст меняется с помощью Jquery:
$(function () {
$("#button").hover(function (e) {
$("#text").text("text1");
По комменту 3:
$("#button").hover(
function () {
if ($("#text").text() == 'TEXT2 TEXT2 TEXT2') {
$("#text").text('TEXT2 TEXT2 TEXT2')
} else {
$('#text').stop().css('opacity', '0').html(function (_, text) {
return text = 'TEXT2 TEXT2 TEXT2'
}).animate({
opacity: 1
}, 2000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Наведи</button>
<div id="text">TEXT1 TEXT1 TEXT1</div>
По комменту 2:
$("#button").hover(
function () {
$('#text').stop().css('opacity', '0').html(function (_, text) {
return text = 'TEXT2 TEXT2 TEXT2'
}).animate({
opacity: 1
}, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Наведи</button>
<div id="text">TEXT1 TEXT1 TEXT1</div>
По комменту:
$("#button").hover(
function () {
$('#text').stop().css('opacity', '0').html(function (_, text) {
return text == 'TEXT1 TEXT1 TEXT1' ? 'TEXT2 TEXT2 TEXT2' : 'TEXT1 TEXT1 TEXT1'
}).animate({
opacity: 1
}, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Наведи</button>
<div id="text">TEXT1 TEXT1 TEXT1</div>
$(function() {
$("#button").hover(function () {
$("#text").animate({opacity: 'toggle'}, 'slow').text("text1");;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Наведи</button>
<div id="text"></div>