0

这是我迄今为止的尝试http://thezoo.com/test/

在http://tooltipsy.com/samples.html，他在页面下方标记为“More Extreme - 从天上掉下来怎么样”的第 7 个示例使 div 从页面顶部掉落并在点击的框上方反弹。

我试图让他的代码独立于他的工具提示例程工作，以简单地使用基本的 jquery 和 UI 库。他对世界的独特贡献是从页面顶部坠落的部分。我已经在 div 上尝试了一些 onclick 函数或使用链接触发器并将他的第一行替换为： $('mydiv').click(function(){ 但到目前为止没有运气。我错过了什么？我会喜欢使用 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);
    }
});

感谢您的协助。

4

2 回答 2

6

这是带有工作演示的jsfiddle：

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

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

于 2012-02-06T17:26:22.443 回答
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 等）

希望这可以帮助。

于 2012-02-06T17:01:19.360 回答