js 點擊動畫更改元素的高度和元素的文本內容
阿新 • • 發佈:2017-08-25
默認事件 stop htm inner span func delay back 內容
動畫效果兼容各大標準瀏覽器和 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 點擊動畫更改元素的高度和元素的文本內容