Taobao-Style Business Icon Animation

Add-ons

2026-07-26 07:01 4 次浏览 • 0 次下载 26.2KB

Plugin description: Taobao-style business icon hover animations, implemented manually using the jQuery framework.

The HTML structure is as follows:

<div id="move">
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>Rental Housing</p></a>
</div>

Then include the jQuery framework.

Add the following JS code to the page:

<script>
    $(function (){
        $('#move a').mouseenter(function () {
                $(this).find('i').animate({top:"-25px",opacity:"0"},300,function () {
                $(this).css({top:'25px'});
                $(this).animate({top:'12px',opacity:'1'},600)
            })
        })
    })
</script>