grumble.js
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,
}
);
);
Can I haz callbacks? Sure.
$('#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);
}
}
);
});