jq点击三角形旋转

这个效果常用于有展开收起的地方,难度不大,容易上手,基础效果。

 html:


标题

css:

.show-up{
	width: 0;height: 0;
	display: inline-block;
	margin-top: 10px;//向下三角形
	border-width: 0 8px 9px;
	border-style: solid;
	border-color:transparent transparent #565656 ;/*灰 透明 透明 */
	/*-webkit-animation:circle 1s infinite ;!*匀速 循环*!*/
}

jq:

var num = 0;
    var one = false;
    $(document).on("click",".choose-close",function () {
        num = (num+180)%360;//旋转180度
        $(this).children().css("transform","rotate("+num+"deg)");//三角形旋转
        if(one){
            $(this).next().slideUp(200);
        }else {
            $(this).next().slideDown(200);
        }
        one = !one;
    })

 

你可能感兴趣的:(部分常见的效果)