Button onClick FadeIn Text

Question

I'd like that somebody could give me an heads-up with the code to achieve this events:

User clicks a button;
Button disappears;
Text fades in saying "Saved!" in the SAME POSITION of the button;
Text fades out;
Button (from 2nd step) reappears.

Here's the code of the button:

<input type="submit" name="gravarpalp" value="Save" />

Thanks in advance!

Could you add code for your attempt? And we can help advise the best ways to improve it? — Ross Gledhill, May 28 '13 at 18:45
Yeah, you need to make an attempt. SO isn't a free freelancer service. :-) This would be fairly easy with jQuery. — isherwood, May 28 '13 at 18:46
Don't take me wrong. I've already tried and did the button to disappear but couldn't manage to make the text appear and disappear at the same position of the button. — FábioMartinho, May 28 '13 at 18:51

score 0 · Answer 1 · answered May 28 '13 at 18:48

I would use jquery to accomplish this. First, put the controls inside of a div with the following css properties set

<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>

Then add the following function in a script tag. This isn't tested though, it's just to get you started.

function() fadeEffect(){
     $('#fadeButton').fadeToggle();
     $('#fadeSpan').fadeToggle();
     setTimeout(function(){
          $('#fadeButton').fadeToggle();
          $('#fadeSpan').fadeToggle();
     }, 3000);

}

You beat me by a minute ;) – Harsha Venkataramu May 28 '13 at 18:50 — Harsha Venkataramu, May 28 '13 at 18:50

score 0 · Accepted Answer · answered May 28 '13 at 18:49

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#saveme').click(function() {
        $('#saveme').fadeOut('slow', function() {
            $('#saved').fadeIn('slow', function() {
                $('#saved').fadeOut('slow', function() {
                    $('#saveme').fadeIn('slow', function() {

                    });
                });
            });
        });
    });
});
</script>
</head>

<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>

@FábioMartinho : Glad that you found it useful. – Harsha Venkataramu May 28 '13 at 18:58 — Harsha Venkataramu, May 28 '13 at 18:58

gwin003 · Answer 3 · 2013-05-28T18:51:30.853

Check out this link. Looks like you should just be able to set the ForeColor of a Label to a color value that has a different alpha value.

button1.Visible = false;

//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)

button1.Visible = true;

I think you will need some sort of timer so the fade in and out isn't so instant. I'll try explaining better if you need.

EDIT: Sorry, I assumed this was a WinForms app... This won't work for a web application. Try using jQuery or javascript.

Button onClick FadeIn Text

3 Answers3