jquery动效操作元素左右晃动

实际展示的动效效果为一个锦囊持续不断的间隔几秒左右晃动几次,用以提示用户该元素可以点击,查看详细信息

···

//锦囊晃动
jQuery.fn.shake = function (times, offset, delay) {//次数,偏移,间隔
//stop()可停止为完成的动作,当页面打开了但用户去浏览其他页面后回来,能有效防止其不断晃动的一个过程
//先左移一定偏移量,再右移一定偏移量,最后一定要回到原本位置,不然当页面打开但未浏览时,它会自己跑掉~惊恐!
    this.stop().each(function () {
        var Obj = $(this);
        var right = parseInt(Obj.css("right"));
        Obj.animate({ "right": right + offset }, delay, function () {
            Obj.animate({ "right": right - offset }, delay, function () {
                Obj.animate({ "right": right }, delay, function () {
                    times = times - 1;
                    if (times > 0)
                        Obj.shake(times, offset, delay);
                })
            })
        });
    });
    return this;
}
//获取晃动元素,我这里该元素定位为position:relative,方便使用right样式
var pocket = $(".main-box .tip");
//定时调用
setInterval(function () {
    $(pocket).shake(4, 4, 20);
}, 3000);

···

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值