Comment créer javascript/css fadeInDown au passage de la souris?

Question

L'idée de ce que je veux créer est: J'ai un div comme déclencheur lorsque je souris sur ces div que leurs données seront affichées dans un div spécifique, et quand je souris sur les données par défaut montrera, et chaque fois il y aura un effet fadeInDown. Voici je l'ai fait jusqu'à

<style type="text/css"> 
 
    #div1, #div2, #div3 { 
 
     visibility: hidden; 
 
     position: absolute; \t 
 
     } 
 
    .content { 
 
\t margin-left: 200px; 
 
\t background-color: #87C540; 
 
\t height: 100px; 
 
     } 
 
    .trigger { 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: #333; 
 
     margin-bottom: 20px; 
 
     } 
 
</style> 
 

 
<script> 
 
    function show(id) { 
 
    document.getElementById(id).style.visibility = "visible"; 
 
    } 
 
    function hide(id) { 
 
    document.getElementById(id).style.visibility = "hidden"; 
 
    } 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
\t <!--These Three div are the trigger--> 
 
\t <div style="float: left;"> 
 
\t \t <div onMouseOver="show('div1');hide('default')" onMouseOut="show('default'); hide('div1')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div2');hide('default')" onMouseOut="show('default'); hide('div2')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div3');hide('default')" onMouseOut="show('default'); hide('div3')" class="trigger"></div> 
 
\t </div> 
 
\t <!--These are the data--> 
 
\t <div id="default" class="content" style="position: absolute;">This is default</div> 
 
\t <div id="div1" class="content">Div 1 Content</div> 
 
\t <div id="div2" class="content">Div 2 Content</div> 
 
\t <div id="div3" class="content">Div 3 Content</div> 
 
</div>

Tout fonctionne, mais je veux ajouter le fadeInDown effet lorsque les données changent et aussi lorsque la page charge.

Answer 1

Voici la démo de travail avec votre code. vous pouvez le faire en jquery Animer aussi comme ci-dessous:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<style type="text/css"> 
 
    #div1, 
 
    #div2, 
 
    #div3 { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    } 
 
    .content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height: 100px; 
 
    } 
 
    .trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
    } 
 
</style> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script> 
 
    function show(id) { 
 
    document.getElementById(id).style.visibility = "visible"; 
 
    $('#'+id).fadeIn('slow'); 
 
    /*$('#' + id) 
 
     .css('opacity', 0) 
 
     .slideDown('slow') 
 
     .animate({ 
 
     opacity: 1 
 
     }, { 
 
     queue: false, 
 
     duration: 'slow' 
 
     });*/ 
 
    } 
 

 
    function hide(id) { 
 
    document.getElementById(id).style.visibility = "hidden"; 
 
    $('#'+id).fadeOut('slow'); 
 
    /*$('#' + id) 
 
     .css('opacity', 0) 
 
     .slideDown('slow') 
 
     .animate({ 
 
     opacity: 1 
 
     }, { 
 
     queue: false, 
 
     duration: 'slow' 
 
     });*/ 
 
    } 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
    <div onMouseOver="show('div1');hide('default')" onMouseOut="show('default'); hide('div1')" class="trigger"></div> 
 
    <div onMouseOver="show('div2');hide('default')" onMouseOut="show('default'); hide('div2')" class="trigger"></div> 
 
    <div onMouseOver="show('div3');hide('default')" onMouseOut="show('default'); hide('div3')" class="trigger"></div> 
 
    </div> 
 
    <!--These are the data--> 
 
    <div id="default" class="content" style="position: absolute;">This is default</div> 
 
    <div id="div1" class="content">Div 1 Content</div> 
 
    <div id="div2" class="content">Div 2 Content</div> 
 
    <div id="div3" class="content">Div 3 Content</div> 
 
</div>

Answer 2

Vous pouvez utiliser slideDown(), slideUp(). Si vous voulez un effet FadeIn, essayez fadeIn() et fadeOut().

Voici un extrait illustrant slideDown et slideUp

function show(id) { 
 
    $(".content:visible").slideUp(400, function(){ 
 
     $("#" + id).slideDown(400); 
 
    }); 
 
}

#div1, 
 
#div2, 
 
#div3 { 
 
    display:none; 
 
    position: absolute; 
 
} 
 
.content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div style="display: block; width: 100%"> 
 
    
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
    <div 
 
     onMouseOver="show('div1');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    <div 
 
     onMouseOver="show('div2');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    <div 
 
     onMouseOver="show('div3');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    </div> 
 
    
 
    <!--These are the data--> 
 
    <div id="default" class="content"> 
 
    This is default 
 
    </div> 
 
    <div id="div1" class="content">Div 1 Content</div> 
 
    <div id="div2" class="content">Div 2 Content</div> 
 
    <div id="div3" class="content">Div 3 Content</div> 
 
</div>

Answer 3

Sans jQuery. pur javascript/css transition fadeInSlideDown/fadeOutSlideUp

.content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height : 0; 
 
    opacity : 0; 
 
    transition : opacity .5s ease, height .5s ease; 
 
    -webkit-transition : opacity .5s ease, height .5s ease; 
 
    -moz-transition : opacity .5s ease, height .5s ease; 
 
    position: absolute; 
 
} 
 
.content.fade-in-down { 
 
    opacity : 1; 
 
    height : 100px; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
}

<script> 
 
    var myVar; 
 

 
    function show(id) { 
 
    \t clearTimeout(myVar); 
 
    \t document.getElementById("default").classList.remove("fade-in-down"); 
 
    \t setTimeout(function(){ 
 
      var el = document.getElementById(id); 
 
    \t el.classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    function hide(id) { 
 
     \t var el = document.getElementById(id); 
 
    \t el.classList.remove("fade-in-down"); 
 
     myVar = setTimeout(function(){ 
 
      document.getElementById("default").classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    
 
    window.onload = function(e) { 
 
    var el = document.getElementById("default"); 
 
    el.classList.add("fade-in-down"); 
 
    }; 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
\t <!--These Three div are the trigger--> 
 
\t <div style="float: left;"> 
 
\t \t <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
\t </div> 
 
\t <!--These are the data--> 
 
\t <div id="default" class="content" style="position: absolute;">This is default</div> 
 
\t <div id="div1" class="content">Div 1 Content</div> 
 
\t <div id="div2" class="content">Div 2 Content</div> 
 
\t <div id="div3" class="content">Div 3 Content</div> 
 
</div>

simple effet fadeIn/de fadeOut

.content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height : 100px; 
 
    opacity : 0; 
 
    transition : opacity .5s ease; 
 
    -webkit-transition : opacity .5s ease; 
 
    -moz-transition : opacity .5s ease; 
 
    position: absolute; 
 
} 
 
.content.fade-in-down { 
 
    opacity : 1; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
}

<script> 
 
    var myVar; 
 

 
    function show(id) { 
 
    \t clearTimeout(myVar); 
 
    \t document.getElementById("default").classList.remove("fade-in-down"); 
 
    \t setTimeout(function(){ 
 
      var el = document.getElementById(id); 
 
    \t el.classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    function hide(id) { 
 
     \t var el = document.getElementById(id); 
 
    \t el.classList.remove("fade-in-down"); 
 
     myVar = setTimeout(function(){ 
 
      document.getElementById("default").classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    
 
    window.onload = function(e) { 
 
    var el = document.getElementById("default"); 
 
    el.classList.add("fade-in-down"); 
 
    }; 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
\t <!--These Three div are the trigger--> 
 
\t <div style="float: left;"> 
 
\t \t <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
\t </div> 
 
\t <!--These are the data--> 
 
\t <div id="default" class="content" style="position: absolute;">This is default</div> 
 
\t <div id="div1" class="content">Div 1 Content</div> 
 
\t <div id="div2" class="content">Div 2 Content</div> 
 
\t <div id="div3" class="content">Div 3 Content</div> 
 
</div>