最开始是为 Huddle.com 网站开发的, grumble.js 是一个很特别的提示控件,它没有通常的north/east/south/west的定位限制。

任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后,它能在IE6+这些古董浏览器上工作,更不用FF、Chrome这些现代的浏览器了!

grumble.js 其实是一个jQuery插件,可以在 Github找到源码。

$('h1').grumble({
	text: 'Bubble-tastic!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});

案例

这里就能看到以下代码实现的grumble动画。

无文本 可选样式 带有关闭按钮 超大文本区

$('#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,
	}
);
);