jquery 学习（二）动画效果

来源：互联网发布：新闻投稿知乎编辑：程序博客网时间：2024/04/30 20:09

实现文本的渐变

/**

* 当单击click me时，第一个标签的内容淡出显示

     $(document).ready(function() {
         $('p:eq(0)').hide();                                         //让第一个段落标签隐藏
        $('p.more').click(function() {                          //当带有class属性的p标签被单击时触发事件
             $('p:eq(0)')                                                //操作的是第一个p标签
                .fadeTo('show', 0.2)                              //设置不透明度
                .animate({width: 'show'},5000)           //通过animate()方法控制其它效果方法中使用的样式属性通过它可以创建包含多重效果的自定义动画 ,这个方法里传了两个参数第一个参数为样式属性和值的映射，第二参数是速度参数可以是'show'、'normal' 、'fast'也可以是毫秒数
                .animate({height: 'show'},5000)
                .fadeTo('show', 1.0,function() {             //设置不透明度必带有一个回调函数
                     $(this).css('backgroundColor','#fcf');
                 })
                .addCss('background','#f00');

            $(this).hide();   //隐藏当前标签
        });
    });

</script>

<BODY>

    <div class="speech">
         <p>
              只有真实地了解自己才能真正地爱自己。接受真实的自己和他人，我们祛除心灵杂质的
            净化工作，才会更容易；
        </p>
        <p class="more">click me </p>
        <p>
            If you can keep you head when all about you    Are losing their and blaming it on you;

            If you can trust youself when all men doubt you But make allowance for their doubting
            too;
        </p>
    </div>
</BODY>

jquery 学习（二） 动画效果

jquery 学习（二）动画效果