Geek Answers Handbook

Fade In and Fade Out inside a div

I have a div with 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 wash the text inside the div, change the text, and then disappear in the text again. But I do not want to fade and fade div.

If I use this javascript code:

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

I will fade div and text inside.

How can i do this?

+7
source share
6 answers

You want to wrap the text in between, then quench this:

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

and you don’t want to use fadeOut because it will resize your button, as the text will disappear after the fadeOut completes and will no longer take up space. Instead, change the opacity:

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

http://jsfiddle.net/8Dtr6/

EDIT: A little correction while you immediately disappear into it seems to be no problem using fadeIn and fadeOut , at least in chrome. I would expect in smaller browsers to see a slight flicker, but it might be wrong.

Perhaps a slightly cleaner use of the 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

+28
source

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

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

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

+3
source

HTML

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

Js

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

hope this helps

+1
source

You can put the text "Word 1" inside a span or div, for example:

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

Then, inside your WordClicked () function, do:

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

You will need an element inside the #Word1 , which will disappear / in. It should not be a <div> .

0
source

prom () is useful here, but you also need to wrap the content. This example creates a span , but also deletes it after the animation. Thus, you do not have to change your markup and do not change after the animation is completed.

 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/

change or ... maybe just did it with fade callbacks. Still useful if you intend to add additional animation effects to it.

 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/

0
source

More articles:


All Articles