码迷,mamicode.com
首页 > Web开发 > 详细

js 点击动画更改元素的高度和元素的文本内容

时间:2017-08-25 11:05:37      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:ack   style   nim   点击   文本   code   浏览器   结构   默认事件   

动画效果兼容各大标准浏览器和 IE 5-11 版本

js 代码如下:

$(".tc>span>a").click(function () {
        if ($(this)[0].innerText == "更多课程>>"){
            $(".tc>div>ul").stop().delay(50).animate({height:1604},500);
            $(this)[0].innerText = "<<收起";
        }
        else {
            $(".tc>div>ul").stop().delay(50).animate({height:802},500);
            $(this)[0].innerText = "更多课程>>";
        }
        return false; // 阻止默认事件
    }); // 更多课程

HTML 代码结构如下:

<div class="tc mld">
        <h5><span>辅导班</span><small></small></h5>
        <div style="background:#c2c2c2">动画更改高度的div</div>
        <span><a href="#">更多课程>></a></span>
    </div>

O(∩_∩)O谢谢!!!

js 点击动画更改元素的高度和元素的文本内容

标签:ack   style   nim   点击   文本   code   浏览器   结构   默认事件   

原文地址:http://www.cnblogs.com/zxn-9588/p/7426497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!