注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码
充值

jQuery手风琴图片滑动展开切换特效

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-02-13
jQuery手风琴图片滑动展开切换特效
jQuery手风琴图片滑动展开切换特效是一款仿游戏网站的鼠标经过的时候图片高亮滑动展开切换代码。


js代码

<script type="text/javascript">
$(function(){
	  // 初始化 第一个 状态
	  jQuery('.dh ul li.curr').animate({width:'246px'},'slow');
	  jQuery('.dh ul li.curr .layer').animate({height:'60px'},'slow');
	  jQuery('.dh ul li.curr .layer .p1').animate({left:'-200%'},'slow');
	  jQuery('.dh ul li.curr .layer .p2').animate({right:'145px'},'slow');

	  jQuery('.sfq ul li').hover(function(){
		// 获取索引
		 var _index = $(this).index();

		 $(this).addClass('curr')
		 .stop()
		 .animate({
			width:'246px'
		 },'slow')
		 .siblings()
		 .stop()
		 .animate({
			width:'108px'
		 },'slow')
		 .removeClass('curr');

		 $(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({
			 height: '100%'
		 },'slow');

		 $(this).find('.layer .p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({
			 right: '145px'
		 },'slow').parent().parent().siblings().find('.layer .p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({
			 right: '-200%'
		 },'slow')

	  },function(){
		//移出

	  })
});
</script>