expand div hauteur onmouseover

J'ai besoin de la hauteur de la div 50px en défaut et il doit être changé à 300px onmouseover. J'ai codé en-dessous de manière à le mettre en œuvre.

<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>

Ce code fonctionne très bien, mais comme par propriété CSS sur le vol stationnaire ses immédiatement changer sa hauteur. Maintenant, j'ai besoin d'une manière élégante, comme le développement lent de la div onmouseover et de passation de marchés onmoveout. Comment élargir et de contrat div sur le vol stationnaire?

source d'informationauteur Mad coder.

  1. 7

    Il existe quelques approches -- voici le CSS et Jquery, qui devrait fonctionner dans tous les navigateurs, et pas seulement les modernes:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $("#div1").hover(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=250' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '-=250px' //substracts 250px
        }, 'slow'
      );
    }
  );

});
</script> 

<style type="text/css">
#div1{
    height:50px;
    overflow:hidden;
    background: red; /* just for demo */
}
</style>

<body>
<div id="div1">This is div 1</div>
</body>
  2. 4
    #div1{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    Facile!

  3. 3

    Dans un "moderne" du navigateur, vous pouvez simplement appliquer un css transition effect:

    #div1 {
    -moz-transition: 4s all ease-in-out;
    -ms-transition: 4s all ease-in-out;
    -webkit-transition: 4s all ease-in-out;
    -o-transition: 4s all ease-in-out;
}

    Ce serait d'appliquer un effet de transition de plus de 4 secondes avec un ease-in-out assouplissement compatible firefox, ie, chrome/safari (webkit) et le navigateur opera. Lire la suite:

    Les Transitions CSS

    Vous pouvez faire un pas en avant et vérifier si le navigateur prend en charge les transitions css, si possible, de les utiliser pour l'animation et si pas utiliser de javascript script d'animation. Exemple:

    BarFoos animations

  4. 2

    Vous pouvez utiliser du jQuery .animate() Cela va agir sur n'importe quel élément avec une classe de "tab", et reviendra sur la souris.

    $('.tab').hover(function() {
     $(this).stop()
     $(this).animate({
        height: '+=250'
      }, 500)

         }, function() {
    $(this).stop()
     $(this).animate({
        height: '-=250'
      }, 500)            
})
  5. 1

    Vous pouvez utiliser du jquery .mouseover http://api.jquery.com/mouseover/.mouseout http://api.jquery.com/mouseout/et .animate http://api.jquery.com/animate/ pour l'effectuer.

    Sur le .mouseover cas, vous animez la hauteur de 300px, et sur la .mouseout événement vous animer à 50px. Assurez-vous que vous appelez .stop sur la div avant d'appeler animer, sinon vous aurez bizarre questions.