7

I have a div with a CSS style to show it as a button:

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

And CSS styles:

.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;}

I want to fade out text inside div, change text, and then fade in text again. But I don't want to fade in and fade out div.

If I use this javascript code:

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

I will fade out div and text inside.

How can I do that?

VansFannel
  • 45,055
  • 107
  • 359
  • 626

6 Answers6

30

You want to wrap the text in a span then fade that out:

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

and you don't want to use fadeOut because that will change the size of your button as the text will disappear once fadeOut ends and no longer take up space. Instead animate the opacity:

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

http://jsfiddle.net/8Dtr6/

EDIT: Slight correction, as long as you immediately fade back in it does not seem to be an issue to use fadeIn and fadeOut, at least in chrome. I would expect maybe in lesser browsers to see a slight flicker, but could be wrong.

Possibly a bit cleaner using queue to avoid callbacks:

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

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

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • +1 for animate instead of FadeOut. It might make sense to set the text dynamically thought, instead of hardcoding it into the jQuery statement. Something along the lines of: `var new_text = $(".button .new-text").text();` -> `$(this).text(new_text);` – Wex Jun 07 '11 at 18:41
  • @Wex Thanks, yeah I'm assuming he's going to have some way of deciding what the text will be. This was just to demonstrate the animation part of it. – James Montagne Jun 07 '11 at 18:47
  • @kingjiv: I'm using this code to do the same with an `` tag but I'm getting a 'flick' while I'm changing. Any advice? – VansFannel Jun 08 '11 at 10:21
  • With an img it would probably look nicer to have 2 images and fade one in while the other fades out. The problem is probably that you're changing the src and once you do the new image has to load. Before it is loaded it is not taking up space. – James Montagne Jun 08 '11 at 13:08
  • @kingjiv: You can find the code I'm using here: http://stackoverflow.com/questions/6277427/flicking-while-swiching-from-one-image-to-another – VansFannel Jun 09 '11 at 06:11
2

Try using the contents() function. And wrap() the Contents with another element. such as

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

Here is a simple demo http://jsfiddle.net/7jjNq/

John Hartsock
  • 85,422
  • 23
  • 131
  • 146
  • 2
    you can't animate textnodes like that. – Niklas Jun 07 '11 at 18:09
  • If I do that, I get an exception. – VansFannel Jun 07 '11 at 18:12
  • @Niklas yes I see that you cant animate textnodes like that. However I have edited my answer to provide a simple solution using the contents() function and the wrap() function – John Hartsock Jun 07 '11 at 18:14
  • @VansFannel...I modified the answer. It works now and I provided a simple demo – John Hartsock Jun 07 '11 at 18:17
  • That's lot better, but it still doesn't work as the `fadeOut()` is applied on the `contents()` and not the parent `wrap()`. `$('#Word1').contents().wrap('
    ').parent().fadeOut('fast');` would hide the wrapper.
     – Niklas Jun 07 '11 at 18:18
1

html

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

js

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

hope it helps

genesis
  • 50,477
  • 20
  • 96
  • 125
1

You could put the text "Word 1" inside a span or div, like so:

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

Then, inside of your WordClicked() function do:

$("#Word1Text").fadeOut("fast", function()
{
  $("#Word1Text").html("New Text").fadeIn("fast");
});
ScubaSteve
  • 7,724
  • 8
  • 52
  • 65
0

You'll need an element inside the #Word1 element that is faded out/in. It doesn't need to be a <div>.

Sonny
  • 8,204
  • 7
  • 63
  • 134
0

promise() is useful here, but you'll need to wrap the contents as well. This example creates a span but also removes it after animation. So you won't have to change your markup, nor does it change after the animation is complete.

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();
  });
  });

example: http://jsfiddle.net/niklasvh/jkaYr/

edit or... could have just done it with the fade callbacks. Still useful if you intend to add more animation effects to it though.

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();
  });
  });

example: http://jsfiddle.net/niklasvh/jkaYr/15/

Niklas
  • 29,752
  • 5
  • 50
  • 71