关于正反向特效求大神帮忙
jquery吧
全部回复
仅看楼主
level 2
CSS:
body,a,p{ margin:0; padding:0;}
#rfloat{width:108px;
position:fixed;
top:10%;
right:-108px;
z-index:999;
opacity:0;
}
JQ:
/**这个是滚动隐藏显示**/
$(window).scroll(function(){//鼠标滚动触发
var nlock = $(window).scrollTop()//当前滚动条距离网页顶部
if(500<=nlock){$("#rfloat").animate({opacity:1,right:0},1100);}//当滚动条距离顶部 大于或等于 500 以动画形式设置不透明度100%定位右距离0
//else{$("#rfloat").animate({opacity:0,right:"-180px"},1100);}//当滚动条距离顶部 小于 500 以动画形式设置不透明度0%定位右距离-180px 这是#rfloat的初始值
});//事件结束
当Else注释掉,代码正常,但Else放出来就什么效果都没有了
2017年10月03日 01点10分 1
level 2
WEB的人都那么不热情么,很多帖子都啥啥培训
2017年10月04日 01点10分 2
level 1
在if和else里面你的animate函数之前加上一句$('#rfloat').stop();试试看
2017年10月04日 18点10分 4
太赞了!
2017年10月05日 02点10分
太赞了!
2017年10月05日 02点10分
是什么原因呢?多次被触发?
2017年10月05日 02点10分
@御河的天街Voil animate()就算动画执行完毕,仍然保持动画中状态,需要再次执行动画就先得停止动画,stop()就是停止动画函数。
2017年10月05日 02点10分
level 1
参考代码
var flag = true;
$(window).scroll(function() {
var sTop = $(this).scrollTop();
if(sTop >= 500){
if(flag){
$('#rfloat').stop();
$('#rfloat').animate({...}, 1000);
flag = false;
}
} else if(!flag){
$('#rfloat').stop();
$('#rfloat').animate({...}, 1000);
flag = true;
}
});
2017年10月05日 10点10分 5
level 1
其实我倒不建议用jquery的animate()作为频繁的鼠标事件的事件驱动,因为动画会在队列里面积累,而且即使前后效果一样。
比如css里
#rfloat{ opacity:0; } jq里$('#
rfloat').animate({opacity: 0}, 5000);
前后一样,它也会执行5秒的动画,但是看起来是没效果的,因为opacity没变。
而且鼠标快速上下滚动滚轮的时候,想要的效果是scrollTop到达某处就立刻阻断当前动画(如有),执行新的动画。
倒不如一切从简用css的transition属性结合jq妥当。
2017年10月05日 10点10分 6
感谢大神,有qq吗,我想抱大腿
2017年10月05日 11点10分
if(条件1){ if(条件2){ 满足执行 } } 不知道有没这种写法呢,我从其他语言转过来很多都迷糊
2017年10月05日 11点10分
@御河的天街Voil 可以这样写的
2017年10月05日 11点10分
@御河的天街Voil 哈哈我不是大神,我也在学习中
2017年10月05日 17点10分
1