jQuery提示信息气泡插件jquery.grumble

Examples

下面是一组气泡动画效果，点击这里来查看效果。

没有文字不同的样式带关闭按钮大气泡效果

$('#grumble1').grumble(        {               text: '',               angle: 200,             distance: 3,            showAfter: 1000,                hideAfter: 2000 });$('#grumble2').grumble(      {               text: 'Ohh, blue...',           angle: 180,             distance: 0,            showAfter: 2000,                type: 'alt-',           hideAfter: 2000 });$('#grumble3').grumble(      {               text: 'Click me!',              angle: 150,             distance: 3,            showAfter: 3000,                hideAfter: false,               hasHideButton: true,            buttonHideText: 'Pop!'  });$('#grumble4').grumble(      {               text: 'Whoaaa, this is a lot of text that i couldn\'t predict',         angle: 85,              distance: 50,           showAfter: 4000,                hideAfter: 2000,        }););

$('#myElement').grumble({ showAfter: 1000, hideAfter: 2000, onShow: function(){ console.log('triggered when show animation completes'); }, onBeginHide: function(){ console.log('triggered when hide animation begins'); }, onHide: function () { console.log('triggered when hide animation completes'); }});

The darkside of grumble.js

grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。

Warning: Clicking on this link may damage your UX. 点击这里看看(:p)

$('#darkside').click(function(e){ var $me = $(this), interval; e.preventDefault(); $me.grumble( { angle: 130, text: 'Look at me!', type: 'alt-', distance: 10, hideOnClick: true, onShow: function(){ var angle = 130, dir = 1; interval = setInterval(function(){ (angle >220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir)); $me.grumble('adjust',{angle: angle}); },25); }, onHide: function(){ clearInterval(interval); } } );});