zepto 动画

由于zepto的 show hide 不提供动画效果

另谋出路 第一想到的就是css3

可以改变透明度可以实现动画效果 

但是存在问题 虽然看不见了 但是元素实际上还在改位置 是会触发各种事件的

解决方法 让元素离开改位置 也就是添加位置的改变

设置负的方向值就行 同时也能继承动画效果

实际效果 没有单改变透明度效果好

$this.scroll(function () {
if ($this.scrollTop() >= (winheight - offtop)) {
$('.goup').css({'opacity':.5,'bottom':40+'px'});
}else if($this.scrollTop() <= (winheight - offtop)){
$('.goup').css({'opacity':.5,'bottom':-40+'px'});
}
});

.goup{
position: fixed;
right: 20px;
bottom: -40px;
width: 30px;
height: 30px;
opacity: 0;
border-radius: 50%;
-webkit-transition: all .6s;
}

转载于:https://www.cnblogs.com/-maomao-/p/7666843.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值