Die Animationsfunktion von jQuery realisiert den Bild- und Textwechselanimationseffekt_jquery

Auf einigen Bildwebsites können wir sehen, dass Sie beim Anzeigen von Bildern die Texteinführungsinformationen des Bildes sehen können, indem Sie die Maus sanft über das Bild bewegen. Tatsächlich kann ein solcher Animationsprozess mithilfe der Animationsfunktion von jQuery realisiert werden .

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

Wir verwenden ein DIV.wrap, um ein Bild zu platzieren, und ein div.cover, das abgedeckt werden muss. Das Cover platziert die Einführungsinformationen des Bildes und unterstützt alle Standard-HTML-Inhalte. Kopieren Sie dann den obigen Code mehrmals und ordnen Sie ihn in einer Gruppe von Bildern an.

CSS

Wir müssen CSS verwenden, um die .wrap-Datei auszurichten und einen Teil der .cover-Überlagerung auszublenden. Wenn die Maus nach oben gleitet, wird sie durch den Aufruf von jquery angezeigt.

.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; } 

Es ist erwähnenswert, dass der versteckte .cover-Teil position:absolute absolute Positionierung verwendet. Das Overlay .cover zeigt nur den Titelteil an. Sie müssen nur top:170px festlegen, da die Höhe dieses .wrap 200px beträgt Der Titel h3 lautet: Die Höhe beträgt 30 Pixel, subtrahiert.

jQuery

Zuerst stelle ich die Transparenz des Overlays auf 0,8 ein und verwende dann die Hover-Funktion, um die Animationsanimation aufzurufen, wenn die Maus über das Bild gleitet.

$(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}); 
  }); 
}); 

Die Animationsfunktion ist eine Funktion, die jQuery zum Erstellen benutzerdefinierter Animationen verwendet. Der Schlüssel zu dieser Funktion besteht darin, die Attributobjekte Animationsform und Ergebnisstil anzugeben. Jede Eigenschaft in diesem Objekt stellt eine Stileigenschaft dar, die sich ändern kann (z. B. „Höhe“, „oben“ oder „Opazität“). Der Wert jedes Attributs gibt den Wert dieses Stilattributs an, wenn die Animation endet. Wenn es sich um einen numerischen Wert handelt, verläuft die Stileigenschaft vom aktuellen Wert zum angegebenen Wert. Wenn ein Zeichenfolgewert wie „hide“, „show“ oder „toggle“ verwendet wird, wird das Standardanimationsformular für die Eigenschaft aufgerufen.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen,