使用jQuery实现淘宝动画案例-原创手记-慕课网

使用jQuery实现淘宝动画案例原创

陈先森 2016-12-27 16:56:01 浏览 4610

陈先森

关注TA

手记 14

粉丝 5

获赞 173

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-jquery动画案例</title>
<link type="text/css" href="animate.css" rel="stylesheet" />
<script src="jquery-1.8.2.js"></script> 

<script type="text/javascript">
    $(function(){
        $('#move a').mouseenter(function(){
            //300、200为速度
            $(this).find('i').animate({top:'-25px',opacity:'0'},300,function(){
                $(this).css({top:'30px'});
                $(this).animate({top:'20px',opacity:'1'},200);
            });
        });
    });
/**
当前值去找元素i做动画，让top值去做运动，透明度从有到无，速度为300毫秒；
然后走回调函数，执行完向上即top值为-25px，马上将top值置为30px，然后再做运动，从30px到20px。
**/   
</script>
</head>
<body>
    <div id="move">
        <a href="#"><i><img src="images/1.png"/></i><p>手机</p></a>
        <a href="#"><i><img src="images/2.png"/></i><p>手表</p></a>
        <a href="#"><i><img src="images/3.png"/></i><p>螺丝</p></a>
        <a href="#"><i><img src="images/4.png"/></i><p>修改</p></a>
        <a href="#"><i><img src="images/5.png"/></i><p>定位</p></a>
        <a href="#"><i><img src="images/6.png"/></i><p>音乐</p></a>
    </div>
</body>
</html>

20人推荐

发表评论