jQuery常用交互效果
一、点击div控制另一div的显示和隐藏
$(".con").bind("click",function(){ var flag=$(".main").is(":hidden"); if(flag){ $(".main").addClass('animated fadeIn').show(); }else{ $(".main").removeClass('animated fadeIn').hide(); } });
jQuery 选择器(:hidden)详解:
元素可以被认为是隐藏的几个情况:
- 他们的CSS
display
值是none
。 - 他们是
type="hidden"
的表单元素。 - 它们的宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的,因此该元素是不会在页面上显示。
注意:在jQuery中,visibility: hidden;
和opacity: 0;
都被视作可见的,因为它们在页面上占据了相应的物理空间。详情参考API.
二、返回顶部
$(".up").on("click",function(){ $("html,body").animate({scrollTop:0},1500) })
三、jquery实现当页面下拉到一定位置时,右下角出现回到顶部图标。
1 showScroll(); 2 function showScroll(){ 3 $(window).scroll(function(){ 4 var scrollValue=$(window).scrollTop(); 5 scrollValue>600?$(".fixed-right").fadeIn():$(".fixed-right").fadeOut(); 6 }); 7 $(".fix-top").click(function() { 8 $("html,body").animate({scrollTop:0}, 200); 9 }); 10 }
四、js返回上一页/上一层
window.history.go(-1);
或者
window.history.back().
返回下一页:window.history.forward()
返回第几页: window.history.go(返回第几页,也可以使用访问过的URL),比如 window.history.go(-2)为返回后两页。
五、tab选项卡切换不同内容举例:
var gtit=$(".group-tit>a"); var gcon=$(".group-content"); gtit.click(function() { var id=$(this).data('id'); // console.log(id); $(this).addClass('active').siblings().removeClass('active'); gcon.hide().eq(id).show(); });