CSS-fade-in beim laden der Seite, fade-out auf hover

Versuchen, dieses Beispiel, das ich zusammengestellt habe. Es wird animation, fade in das Element, und klicken Sie dann verwendet css-übergänge für die Deckkraft auf schweben.

Sollte dies wirklich mit javascript gemacht werden, aber hier ist eine Reine css-Lösung. Wenn Sie möchten, um weitere Gegenstände hinzuzufügen, dann Dupliziere einfach eine der 'fade_item_[x] Unterricht und ändern Sie die Zeiten.

REINE CSS-VERSION

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    /*for hover transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.blocky_text:hover{
    opacity:0.5;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

.fade_item_1{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -moz-animation: fadein 0.5s; /* Firefox */
    -ms-animation: fadein 0.5s; /* Internet Explorer */
    -o-animation: fadein 0.5s; /* Opera */
    animation: fadein 0.5s;
}

.fade_item_2{
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */
    -moz-animation: fadein 0.8s; /* Firefox */
    -ms-animation: fadein 0.8s; /* Internet Explorer */
    -o-animation: fadein 0.8s; /* Opera */
    animation: fadein 0.8s;
}

.fade_item_3{
    -webkit-animation: fadein 1.1s; /* Safari and Chrome */
    -moz-animation: fadein 1.1s; /* Firefox */
    -ms-animation: fadein 1.1s; /* Internet Explorer */
    -o-animation: fadein 1.1s; /* Opera */
    animation: fadein 1.1s;
}

.fade_item_4{
    -webkit-animation: fadein 1.4s; /* Safari and Chrome */
    -moz-animation: fadein 1.4s; /* Firefox */
    -ms-animation: fadein 1.4s; /* Internet Explorer */
    -o-animation: fadein 1.4s; /* Opera */
    animation: fadein 1.4s;
}

HTML:

<p class="fade_item_1 blocky_text"> An example. </p>
<p class="fade_item_2 blocky_text"> An example. </p>
<p class="fade_item_3 blocky_text"> An example. </p>
<p class="fade_item_4 blocky_text"> An example. </p>

Hier ein JSFiddle, dass es funktioniert:
http://jsfiddle.net/DFcb9/1/

JQUERY-VERSION

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    opacity:0;    
}

.hoverable{
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.hoverable:hover{
    opacity:0.5 !important;
}

JQUERY:

$(document).ready(function(){
    fadeInGroup('.blocky_text'); 
});

function fadeInGroup(group){
$(this).css("opacity","0");
$(group).each(function(index, element) {    
    var d = (130 * (index)).toString()
    $(this).delay(d).fadeTo(1200,1,function(){
        $(this).addClass("hoverable");
    });
});

}

HTML:

<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>

Mit dieser version können Sie halten das hinzufügen, wie viele der Texte, wie Sie wollen und Sie werden verschwinden richtig. Jquery in einer Schleife durch die Elemente mit der Klasse "blocky_text" und fügt eine andere start-Verzögerung für jeden.

Können Sie fügen Sie dann eine völlig neue Gruppe von Elementen einer bestimmten Klasse und führen Sie Sie einfach durch duplizieren hinzufügen opacity:0 in die css und fadeInGroup('.classname'); auf die jquery-Dokument laden.

Hier ein jsfiddle für diese arbeiten:
http://jsfiddle.net/utKa5/1/

InformationsquelleAutor mbdavis