fadeToggle in jQuery Example

fadeToggle in jQuery

Description: Display or hide the matched elements by animating their opacity.

index.html

<p>I am <span>Something</span><span class="hidden">Something2</span> </p>



javascript files:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function() {

        // run the fade() function every 2 seconds
        setInterval(function(){
            fade();
        },2000);


        // toggle between fadeIn and fadeOut with 0.3s fade duration.
        function fade(){
            $("span").fadeToggle(300);
        }

    });
</script>

Css for fadeToggle:

<style>
.hidden {
    display:none;
}
span {
    position: absolute;
    left:45px;
    top:10px;
}
p {
    width:200px;
    padding:10px;
    position:relative;
}
</style>