Jquery 鼠标等待1秒后 翻页特效(下到上)


今天项目碰到了这个特效需求~~ 搞了一个下午 终于与现在这个时候写出来了  

特此留念----  


var myTimer;
	var runStatu = 0;
	$(".wall-layout-div").hover(		
		function(){			
			runStatu = 1;
			$(this).find("div:first").css("background-color","#ECECEC"); //
			var obj = $(this).find("div:first");
			myTimer = setTimeout(function(){runStatu = 2;$(obj).animate({"marginTop": "-=200px"}, "fast");},1000);	
		},
		function(){		
			$(this).find("div:first").css("background-color","#FFF");
			if(runStatu == 1){
				clearTimeout(myTimer);
			}else if(runStatu == 2){
				$(this).find("div:first").animate({"marginTop": "+=200px"}, "fast");
				runStatu = 0;
			}
		}
	);

第一步:当然上创建一个 setTimeout对象了。。这个应该是没有任何问题的了。。 

第二部:Jquery 悬停效果-- 这个也不用多说

第三部:最重要的一步 ,, 我就是卡在这里半天!!

var obj = $(this).find("div:first")

这里创建了一个对象obj 用来存放 我要翻往上头的div~  

如果你这里这么写  我就截取之前我写的一段


myTimer = setTimeout(function(){runStatu = 2;
$(this).find("div:first").animate({"marginTop": "-=200px"}, "fast");},1000);	



那么恭喜你。。。 $(this) 对象是读取不到的,我试过alert(this) 理论上会返回Object 但是真实返回值是无 , 也就是根本没有打印出来

所以只能曲线救国了。。。  用obj 对象存放这个div对象 --- 果然 之后$(obj)就获取到了该  鼠标悬停上面的对象--  于是也就这样子解决了~~ 

第四部:当然是用来判断状态了   稍微解释一下 状态0 : 初始化    1:悬停在上方   2:翻页效果实现之后状态

这个就是全部过程了 第三部是最重要的!! 

希望对碰到这个问题的朋友门能少走弯路~~   


                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值