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); } } );});