今天项目碰到了这个特效需求~~ 搞了一个下午 终于与现在这个时候写出来了
特此留念----
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 但是真实返回值是无 ， 也就是根本没有打印出来
....................................................................
第四部：当然是用来判断状态了 稍微解释一下 状态0 ： 初始化 1：悬停在上方 2：翻页效果实现之后状态
这个就是全部过程了 第三部是最重要的！！
希望对碰到这个问题的朋友门能少走弯路~~
今天项目碰到了这个特效需求~~ 搞了一个下午 终于与现在这个时候写出来了
特此留念----
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 但是真实返回值是无 ， 也就是根本没有打印出来
....................................................................
第四部：当然是用来判断状态了 稍微解释一下 状态0 ： 初始化 1：悬停在上方 2：翻页效果实现之后状态
这个就是全部过程了 第三部是最重要的！！
希望对碰到这个问题的朋友门能少走弯路~~
