Jquery fadeOut淡出 fadeIn 淡入 fadeTo指定透明度

最新推荐文章于 2023-02-06 14:00:14 发布

心如止静

最新推荐文章于 2023-02-06 14:00:14 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qhx556/article/details/8892131

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <style type="text/css">
    .imgclass{ width:300px; height:300px; border:solid 1px red;}
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').bind('click', function () {
                $('img').fadeOut(2000, function () {
                    $('#Button1').val('哎，没了');
                });
            })
            $('#Button2').bind('click', function () {
                $('img').fadeIn(2000, function () {
                    $('#Button2').val('有了');
                });
            })
            $('#Button3').bind('click', function () {
                $('img').fadeTo(2000, 0.3, function () {
                    alert('动画执行完毕');
                });
            })
        })
    </script>
</head>
<body>
<div>
<div>
    <input id="Button1" type="button" value="淡出" /><input id="Button2" type="button" value="淡入" /><input id="Button3" type="button" value="指定透明度" /></div>
    <div><img src="images/1.jpg" class="imgclass"/></div>
</div>
</body>
</html>