代码:
$(function() {
var sideRight = $('#sideright');
$('.side-icon').each(function(index){
$(this).toggle(function(){
changeManyElem(sideRight,{'right':0},30);
},function(){
changeManyElem(sideRight,{'right':-350},30);
})
})
})
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function changeManyElem(obj, json, spd, fn) {
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
for (var attr in json) {
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = 0;
speed = (json[attr] - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur != json[attr]) {
flag = false;
}
if (attr == 'opacity') {
obj.style[attr] = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + "px";
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, spd);
}
都导入jquery,就不用原生的js获取对象样式。getStyle你用的原生的js,你就要传入dom对象而不是jquery包装后的对象
$(function () {
var sideRight = $('#sideright');
var flag = true;
$('.side-icon').click(function () {
flag = !flag;
sideRight.animate({ 'right': flag ? 0 : -350 }, 30);
console.log(flag)
})
})
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。