Question

在http://tooltipsy.com/samples.html的第7个例子中，标有“更多极端 - 如何从天而降”的页面使得从页面顶部掉落并在点击的框上方反弹。

我正在尝试使他的代码独立于他的工具提示例程工作，以简单地使用基本的jquery和UI库。他对世界的独特贡献是从页面顶部掉落。我已尝试在div上使用一些onclick函数或使用链接触发器并将其替换为第一行： $（ '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);
    }
});

感谢您的帮助。

Answer 1

这是jsfiddle with working demo：

http://jsfiddle.net/apHLu/4/

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

Answer 2

用你的选择器替换他的第一行是行不通的，因为他正在创建回调并将它们传递给他的工具提示功能。相反，您要做的是直接在.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等）

希望这有帮助。

如何从页面顶部进行div下降并在我单击的位置弹跳？

2 个答案: