David Steinsland – informatikkstudent og webutvikler

Tips: Enkle feilmeldinger med animasjon

Her følger en liten kodesnutt som viser en feilmelding i ca. fem sekunder før den fjernes igjen. I dét feilmeldingen vises, blir bakgrunnsfargen forsterket for å få en «se her!»-opplevelse. Dersom musen blir holdt over feilmeldingen, blir den ikke fjernet før etter musepekeren er fjernet fra den.

For å få koden til å fungere trenger du jQuery og jQuery UI.

JavaScript:

$(function ()
{
	$('div.message').hide().effect ('highlight', {
		color:'#ff8a8a'
	}, 2000).delay(3000).animate({
		height: 'toggle',
		opacity: 'toggle'
	}, 'slow').hover (function ()
	{
		$(this).stop(true, true);
	}, function ()
	{
		$(this).delay(2000).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
	});
});

Om du studerer JavaScript-koden, vil du se at vi bruker effekten «Highlight». Effekten angir feilmeldingsboksen med angitt bakgrunnsfarge, før den fader tilbake til bakgrunnsfargen som er satt i CSS. Alternativt kan en benytte seg av «pulsate», som også gir en ganske behagelig animasjon:

 $(function() {
    $('div.message').hide().effect('pulsate', {
        times: 2
    }, 450).delay(4000).animate({
        height: 'toggle',
        opacity: 'toggle'
    }, 'slow').hover(function() {
        $(this).stop(true, true);
    }, function() {
        $(this).delay(2000).animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 'slow');
    });
});

Pulsate-effekten her veksler mellom å skjule/vise feilmeldingsboksen iløpet av 450 millisekunder.

CSS:

div.message
{
    display:none;
    border:1px solid;
    padding:10px;
    color: #D8000C;
    background-color:#FFBABA;
}

div.message h4
{
    font-weight:bold;
    font-size:14px;
}

div.message p
{
    padding:5px 0;
    font-size:12px;
}

HTML:

<div class="message">
    <h4>An Error has Occured!</h4>
    <p>
        There was a problem while editing the article. Your data has been saved, and you can go <a href="#">back</a> to continue editing.
    </p>
    <p>
        Error ID: #1337
    </p>
</div>

Resultatet:

Klikk på «Result» i vinduet under.

Eget vindu

24. juli, 2011