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
