Jquery 我怎样才能使一个div从页面顶部落下并在我点击的地方反弹？

这是我迄今为止的尝试

在他的第7个例子中，标签为More Extreme（更极端）-从天空坠落如何使一个div从页面顶部坠落并在点击框上方反弹

我试图让他的代码独立于他的工具提示例程工作，只需使用基本的jquery和UI库即可。他对世界的独特贡献是从页面顶部跌落。我在一个div上尝试了几个onclick函数，或者使用了一个link触发器，并用以下内容替换了他的第1行： $'mydiv'。单击函数{ 但是到目前为止没有运气。我错过了什么？我想使用Qtip2或ClueTip的从天而降例行程序

以下是他是如何做到这一点的：

$('.hastip').tooltipsy({
    offset: [-10, 0],
    show: function (e, $el) {
        $el.css({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
            'opacity': '1.0'
        }, 300);
    },
    hide: function (e, $el) {
        $el.slideUp(100);
    }
});

---

感谢您的帮助。

仅用选择器替换他的第一行是不起作用的，因为他正在创建回调并将它们传递给他的tooltipsy函数。相反，您要做的是直接在.click函数中执行动画。类似这样的操作：

$('mydiv').click(function(){ 
    $(this).css({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
        'opacity': '0.0',
        'display': 'block'
    }).animate({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
        'opacity': '1.0'
    }, 300);
}

我没有在任何地方对此进行测试，因此它可能不起作用，但它应该为您指出正确的方向。还要注意，他的反弹来自“easeOutBounce”属性。这告诉动画框架尝试根据其开始和结束参数插值div的位置。通常有很多默认值像easeIn、easeOut等一样输入

---

希望这有帮助。

这里是JSFIDLE的工作演示：

---

没有淡出和其他效果，只是从顶部反弹。我希望你能大致了解它的工作原理并适应你的需要；

哇-这对骨骼不好！你是否已经使用过类似的东西，或者你只是从头开始制作它？如果你愿意的话[TheZoo.com-你认为这可以很容易地与Qtip、Cluetip结合起来吗，或者可能是最简单的——我在那里使用的基本Jquery工具提示？我喜欢你的LOTR引号-托尔金和C.S.刘易斯规则；-所以我用了你的优秀代码，在反弹的LOTR div中添加了淡入淡出：-在bounce_1中-你的反弹效果很好-但是Jquery工具提示不起作用我下载了一个没有选项卡的自定义Jquery UI，并取消了一些其他功能，但我无法让工具提示和你的反弹效果一起工作。我的最终目标是让反弹效果与Qtip、Cluetip和Jquery工具提示一起工作，但这些是白日梦吗？@user1192721，不，刚刚没有用过这个有一些空闲时间来写。我怀疑在不重写任何tip插件的情况下添加该功能是否可能。上面的代码需要jQuery UI效果库。我可能会为tip插件编写补丁，但哪一个？是的-这完全有助于我理解格式-谢谢！它似乎与t完全不同JFIDLE reply与工具提示技术更为相似。其中一个比另一个更有优势吗？它们实际上非常相似。JFIDLE reply根据单击的区域计算值。如果你看到他代码中动画发生的部分，基本上是一样的，只是他预计算了顶部的值。