jQuery UI bounce效果

  • Post category:jquery

以下是关于 jQuery UI bounce 效果的详细攻略:

jQuery UI bounce 效果

jQuery UI bounce 效果用于创建一个元素反弹的动画效果。该效果可以通过 jQuery UI 的 effect()调用。

语法

$( ".selector" ).effect( "bounce", options, duration, callback );

参数

  • options:一个对象,表示效果的选项。可以包含以下属性:
  • distance:一个整数,表示元素反弹的距离默认值为 20。
  • times:一个整数,表示元素反弹的次数。默认值为 5。
  • duration一个整数,表示画的持续时间,单位为毫秒。默认为 400 毫秒。
  • callback:一个函数,表示动画完成后要执行的回调函数。

示例一:元素反弹次

$( "#myDiv" ).effect( "bounce", { times: 1 }, 500 );

这将使 id 为 myDiv 的元素反弹一次,持续时间为 500 毫秒。

示例二:元素反弹五次

$( "#myDiv" ).effect( "bounce", { times: 5, distance: 50 }, 1000, function() {
  console.log( "动画完成!" );
});

这将使 id 为 myDiv 的元素反弹五次,每次反弹距离为 50 像素,持续时间为 1000 毫秒,并在动画完成后输出一条消息到控制台。

总结:

jQuery UI bounce 效果用于创建一个元素反弹的动画效果。该效果可以通过 jQuery UI 的 effect() 方法调用。使用该效果可以为网站添加动态效果,提高用户体验。

以上是关于 jQuery UI bounce 效果的详细攻略,包括语法、参数和两个示例。