JQ-动画合集(ing...)

简介: 一:给向上按钮加动画,让页面卷回上面而不是生硬跳转.js$('#topBtn').click(function(){ $('html,body').animate({scrollTop: '0px'}, 1000); return false; ...

一:给向上按钮加动画,让页面卷回上面而不是生硬跳转.js

$('#topBtn').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 1000);
        return false;
        });
//给向上按钮加一个animate的动画,控制scrolltop属性变为零,在1秒内,

(可以加一个$()包起来,当其所在的js页面中有这个设置后,直接copy进去就ok了)

——————————————————————————————————

2017-04-17  17:16:57

二:tab选项卡,用jq实现

$('菜单标签名').click(function(){
    $(this).addClass('hover时的样式名字').siblings().removeClass('hover时的样式名字');
    var index=$(this).index();
    $('对应标签出现的内容区域').eq(index).show().siblings().hide();
});

例子:

1 $('.title li').click(function(){
2     $(this).addClass('on').siblings().removeClass('on');
3     var index=$(this).index();
4     $('.div_tab > div').eq(index).show().siblings().hide();
5 });

 

有空再继续填补,有点高中一点一点补笔记本的感觉,每天学到的补一点,到了高考,我的笔记本是最烂的。额。。。。

目录
相关文章
|
前端开发
前端学习笔记202306学习笔记第四十天-Es6-属性和方法的简写
前端学习笔记202306学习笔记第四十天-Es6-属性和方法的简写
57 0
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
前端开发
css扫描动画效果demo示例(整理)
css扫描动画效果demo示例(整理)
|
前端开发
前端项目实战壹佰react-admin+material ui-踩坑-List的用法之filterDefaultValues设置默认值情况
前端项目实战壹佰react-admin+material ui-踩坑-List的用法之filterDefaultValues设置默认值情况
55 0
|
自然语言处理 JavaScript 前端开发
每天3分钟,重学ES6-ES12(三)标签模版字符串
每天3分钟,重学ES6-ES12(三)标签模版字符串
84 0
|
前端开发
前端学习笔记202304学习笔记第十六天-vue3.0-循环渲染tag标签
前端学习笔记202304学习笔记第十六天-vue3.0-循环渲染tag标签
81 0
|
前端开发
#yyds干货盘点 【React工作记录三十五】ant design中默认回调加入参数
#yyds干货盘点 【React工作记录三十五】ant design中默认回调加入参数
84 0
|
前端开发
前端学习案例-react+ts实现函数倒计时1-hook简介
前端学习案例-react+ts实现函数倒计时1-hook简介
99 0
前端学习案例-react+ts实现函数倒计时1-hook简介