10行以上のコードでは、この効果が正しい限り、すべてが簡単になります効果を見てください！
HTML構造：
コードコピーは次のとおりです。
<ul>
<li> <img src = "images/10.jpg"/> <a href = "＃"> <span> 1 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "＃"> <span> 2 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "＃"> <span> 3 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "＃"> <span> 4 </span> </a> </li>
<li> <img src = "images/10.jpg"/> <a href = "＃"> <span> 5 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "＃"> <span> 6 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "＃"> <span> 7 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "＃"> <span> 8 </span> </a> </li>
</ul>
CSSコード：
コードコピーは次のとおりです。
*{マージン：0;}
.list {width：640px;
。
.list li img {float：width：150px;}
{左：0; ：80px;
JQコード（JQライブラリを導入する必要があることに注意してください）：
コードコピーは次のとおりです。
$（function（）{
$（'。listli '）。hover（function（）{
$（this）.children（ 'a、img'）。stop（）;
$（this）.children（ 'img'）。stop（）。animate（{'margintop'：40、 'height'：0}、200、function（）{
$（this）.siblings（ 'a'）。stop（）。animate（{'height'：80、 'margintop'：0}、200）;
}）;
}、 関数 （） {
$（this）.children（ 'a、img'）。stop（）;
$（this）.children（ 'a'）。stop（）。animate（{'height'：0、 'margintop'：40}、200、function（）{
$（this）.siblings（ 'img'）。stop（）。animate（{'margintop'：0、 'height'：80}、200）;
}）;
}）;
}）;
JQコードの簡単な文章ではありませんか？親愛なる、あなたはそれをコピーして効果を見るかもしれません！