弹跳特效指的是在网站建设时，任何调用该方法的对象都被设置为弹跳显示效果，利用该效果可以设计各种晃动行为，以便在网页设计中设计一种富有动态化的交互视觉。本示例利用jQuery弹跳特效设计交互行为，当在鼠标经过小球时，呈现弹跳显示效果，以增强界面的游戏互动特性。

【操作步骤】

第1步，启动Dreamweaver，打开本节示例中的orig.html文件，另存为effect.html。

第2步，把光标置于页面中，选择【插入】|【图像】|【图像】命令，在页面中插入一个小球，在【属性】面板中设置小球宽度为300像素。　

第3步，选中标签<div id="apDiv1">，选择【窗口】|【行为】命令，打开【行为】面板，单击加号按钮，从弹出的下拉菜单中选择【效果】|Bounce命令。

第4步，打开Bounce对话框，设置【目标元素】为“<当前选定内容>”，【效果持续时间】为1000ms，即一秒钟；设置【可见性】为hide，即效果结束后隐藏元素；设置【方向】为up，即定义目标对象向上弹跳，定义【距离】为50像素，【次】为5次。设置完毕，单击【确定】按钮完成操作。

第5步，在【行为】面板中可以看到新增加的行为，单击左侧的onClick，从弹出的下拉菜单中选择onMouseOver，即设计当鼠标经过正文区域时，将触发弹跳特效。

第6步，继续模仿第3、4、5步操作，再添加一个Bounce特效，设置【目标元素】为“<当前选定内容>”，【效果持续时间】为1000ms，即一秒钟；设置【可见性】为show，即效果结束后显示元素；设置【方向】为up，即定义目标对象向上弹跳，定义【距离】为50像素，【次】为5次，设置如图7.56所示。设置完毕，单击【确定】按钮完成操作。

第7步，在【行为】面板中修改事件类型，单击左侧的onClick，从弹出的下拉菜单中选择on-MouseOver，即设计当鼠标经过时，将触发弹跳特效，然后单击向下箭头按钮，把当前行为移到下面，让该行为在上一步定义的行为之后发生。

第8步，按Ctrl+S快捷键保存页面，此时Dreamweaver会弹出对话框，提示保存两个插件文件。单击【确定】按钮，保存jquery-1.8.3.min.js和jquery-ui-effects.cus-tom.min.js两个库文件。

第9步，在浏览器中预览，当鼠标移到摘要正文上时，文字会高亮显示并逐步隐藏，然后再恢复正常显示。

提示：Dreamweaver在制作网页时定制的jQuery高亮特效，实际上与jQuery原生的高亮特效所产生的效果是不同的，Dreamweaver强化了高亮显示后显示或隐藏对象，而不是保持对象默认的显示状态。因此，Dreamweaver的高亮特效适合设计渐隐、渐显特效。如果希望使用Dreamweaver的Highlight特效设计高亮显示，必须使用两个Highlight行为叠加设计，方法如本节示例。