La fonction d'animation de jQuery réalise une animation de commutation d'image et de texte effect_jquery

Sur certains sites Web d'images, nous pouvons voir que lors de l'affichage d'images, vous pouvez voir les informations d'introduction du texte de l'image en faisant glisser doucement la souris sur l'image. En fait, un tel processus d'animation peut être réalisé en utilisant la fonction d'animation de jQuery. .

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>强震摧毁加勒比海小国海地</h3> 
    <p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍有明亮的瞬间存在。</p> 
    <p><a href="#">查看详情</a></p> 
  </div> 
</div>

Nous utilisons un DIV.wrap pour placer une image et un div.cover qui doit être couvert. La couverture place les informations d'introduction de l'image et prend en charge tout contenu HTML standard. Copiez ensuite le code ci-dessus plusieurs fois et organisez-le dans un groupe d'images.

CSS

Nous devons utiliser CSS pour aligner le .wrap et masquer une partie de la superposition .cover Lorsque la souris glisse vers le haut, elle sera affichée en appelant jquery.

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;} 
.wrap img{position:absolute; top:0; left:0} 
.wrap h3{line-height:30px; font-size:14px; color:#fff} 
.wrap p{line-height:20px} 
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; } 

Il convient de noter que la partie cachée .cover utilise le positionnement absolu position:absolute. La superposition .cover affiche uniquement la partie titre. Il vous suffit de définir top:170px, car la hauteur de ce .wrap est de 200px, et le titre h3 est La hauteur est de 30px, soustraite.

jQuery

Je règle d'abord la transparence de la superposition sur 0,8, puis j'utilise la fonction de survol pour appeler l'animation animée lorsque la souris glisse sur l'image.

$(function(){ 
  $(".cover").css("opacity",.8); 
  $(".wrap").hover(function(){ 
    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160}); 
  },function(){ 
    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160}); 
  }); 
}); 

La fonction animer est une fonction que jQuery utilise pour créer des animations personnalisées. La clé de cette fonction est de spécifier les objets d'attribut de forme d'animation et de style de résultat. Chaque propriété de cet objet représente une propriété de style qui peut changer (telle que « hauteur », « haut » ou « opacité »). La valeur de chaque attribut indique la valeur de cet attribut de style à la fin de l'animation. S'il s'agit d'une valeur numérique, la propriété de style passera de la valeur actuelle à la valeur spécifiée. Si une valeur de chaîne telle que « cacher », « afficher » ou « basculer » est utilisée, le formulaire d'animation par défaut est invoqué pour la propriété.

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous,