Исчезает и исчезает текст внутри div

у меня есть div со стилем CSS, чтобы показать его как кнопку:

<div id="Word1" class="btn green" onclick="WordClicked(1);">Word 1</div>

и CSS стили:

.btn {
    display: inline-block;
    background: url(btn.bg.png) repeat-x 0px 0px;
    padding: 5px 10px 6px 10px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    text-align: center;
    border: 1px solid rgba(0,0,0,0.4);
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

.green      {background-color: #CCCCCC; color: #141414;}

Я хочу выцветать текст внутри div, изменять текст, а затем снова исчезать в тексте. Но я не хочу исчезать и исчезать разд.

Если я использую этот код JavaScript:

$('#Word1').fadeOut('fast');

Я исчезну div и текст внутри.

как я могу это сделать?

7
fadein fadeout html jquery

6 ответов

вы хотите обернуть текст в промежуток, а затем исчезнуть:

<div class="button"><span>TEXT!</span></div>

и вы не хотите использовать fadeOut потому что это изменит размер вашей кнопки, поскольку текст исчезнет один раз fadeOut заканчивается и больше не занимают место. Вместо этого анимируйте непрозрачность:

$(".button").click(function(){
    $(this).find("span").animate({opacity:0},function(){
        $(this).text("new text")
            .animate({opacity:1});  
    })
});

http://jsfiddle.net/8Dtr6/

EDIT: небольшая коррекция, Если вы сразу же исчезнете в нем, похоже, не проблема использовать fadeIn и fadeOut, по крайней мере в Chrome. Я ожидал бы, возможно, в меньших браузерах увидеть небольшое мерцание, но может быть неправильно.

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

$(".button").click(function(){
    $(this).find("span")
        .animate({opacity:0})
        .queue(function(){
             $(this).text("new text")
                    .dequeue()
        })
        .animate({opacity:1});  
});

http://jsfiddle.net/8Dtr6/2

29

попробуйте использовать содержание(). И wrap () содержимое с другим элементом. такие как

$('#Word1').contents().wrap('<div class="temporary">').parent().fadeOut('fast');

вот простая демонстрация http://jsfiddle.net/7jjNq/

3

HTML-код

<div id="Word1" class="btn green" onclick="WordClicked(1);"><span id="word555">Word 1</span></div>

js

$('#word555').fadeOut('fast');

надеюсь, что это помогает

1

Вы можете поместить текст "слово 1" в span или div, вот так:

<div id="Word1" class="btn green" onclick="WordClicked(1);"><span id="Word1Text">Word 1</span></div>

затем внутри вашей функции WordClicked () выполните:

$("#Word1Text").fadeOut("fast", function()
{
  $("#Word1Text").html("New Text").fadeIn("fast");
});
1

вам понадобится элемент внутри #Word1 элемент, который выцветает / in. Это не должно быть <div>.

0

promise() полезно здесь, но вам также нужно обернуть содержимое. В этом примере создается span, но и удаляет его после анимации. Таким образом, вам не придется изменять разметку, и она не изменится после завершения анимации.

var v = $('#Word1');
$('<span />').text(v.text()).appendTo($(v).empty()).fadeOut('fast').promise().done(function() {
    $(this).text('Word 2').fadeIn().promise().done(function() {
    v.text($(this).text());
        $(this).remove();
  });
  });

пример:http://jsfiddle.net/niklasvh/jkaYr/

редактировать или... мог бы просто сделать это с обратными вызовами. Все еще полезно, если вы собираетесь добавить больше анимации но это не помешает.

var v = $('#Word1');
$('<span />').text(v.text()).appendTo($(v).empty()).fadeOut('fast',function() {
    $(this).text('Word 2').fadeIn('fast',function() {
    v.text($(this).text());
        $(this).remove();
  });
  });

пример:http://jsfiddle.net/niklasvh/jkaYr/15/

0