jQueryのanimate関数で画像とテキストの切り替えアニメーションを実現effect

jQueryのanimate関数で画像とテキストの切り替えアニメーションを実現effect_jquery

WBOY

リリース： 2016-05-16 16:01:28

オリジナル

1129 人が閲覧しました

一部の画像サイトでは、画像を表示する際にマウスを画像上で軽くスライドさせると、その画像の紹介情報が文字で表示されることがありますが、実はこのようなアニメーション処理はjQueryのanimate関数を利用することで実現できます。。

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

ログイン後にコピー

DIV.wrap を使用して画像を配置し、カバーする必要がある div.cover を使用して画像の紹介情報を配置し、標準の HTML コンテンツをサポートします。次に、上記のコードを複数回コピーし、画像のグループに配置します。

CSS

CSS を使用して .wrap を並べ、.cover オーバーレイの一部を非表示にする必要があります。マウスを上にスライドすると、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; }

ログイン後にコピー

非表示の .cover 部分は、position:absolute 絶対位置指定を使用することに注意してください。この .wrap の高さは 200px であるため、オーバーレイ .cover には、top:170px を設定するだけで済みます。タイトルのh3は高さの30pxを引いたものです。

jQuery

まず、オーバーレイの透明度を 0.8 に設定し、マウスが画像上をスライドしたときにホバー機能を使用してアニメーションアニメーションを呼び出します。

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

ログイン後にコピー

animate 関数は、jQuery がカスタムアニメーションを作成するために使用する関数です。この関数の重要な点は、アニメーションフォームと結果スタイル属性オブジェクトを指定することです。このオブジェクトの各プロパティは、変更できるスタイルプロパティ (「高さ」、「上部」、「不透明度」など) を表します。各属性の値は、アニメーション終了時のこの style 属性の値を示します。数値の場合、スタイルプロパティは現在の値から指定された値までグラデーションになります。「非表示」、「表示」、または「切り替え」などの文字列値が使用される場合、そのプロパティに対してデフォルトのアニメーションフォームが呼び出されます。

上記がこの記事の全内容です。皆さんに気に入っていただければ幸いです。