`
北海肥猫
  • 浏览: 29003 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

jQuery 效果(二)

阅读更多

1.jQuery动画效果

jQuery animate()方法用于创建自定义动画

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性;
//可选的 speed 参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//可选的 callback 参数是动画完成后所执行的函数名称;

 

下面为几个实例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
//点击button按钮时div块向左右(取决于当前位置)移动的同时放大150px;
//其中'+='为相对变化,再次点击button时div块继续放大150px;


$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
//编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列,然后逐一运行这些 animate 调用;


$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle";
//点击button时,div块向上收缩,再次点击向下展开;

 2.jQuery停止动画

jQuery stop() 方法用于停止动画或效果,在它们完成之前

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列,默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行;
//可选的 goToEnd 参数规定是否立即完成当前动画,默认是 false;

 

 

分享到:
评论

相关推荐

    Jquery图片渐变效果

    在网页设计中,jQuery 图片渐变效果是一种增强用户体验的常见技术。这种效果可以使图片在加载或切换时平滑地过渡,为用户带来更流畅、更动态的视觉体验。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jquery效果程序包

    《jQuery效果程序包详解》 在网页开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作,事件处理,动画效果以及Ajax交互等任务。本文将深入探讨jQuery的效果程序包,带你了解如何利用它来实现...

    jquery响应式二级导航显示不同内容效果

    "jQuery响应式二级导航显示不同内容效果"是一个专为解决这一问题而设计的技术方案。这个方案借鉴了国外收费网站的优秀实践,通过jQuery库实现了一套灵活且功能丰富的二级下拉菜单系统。 jQuery是一个广泛使用的...

    jquery实例演示及动态效果

    **jQuery 实例演示及动态效果** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在"jQuery实例演示及动态效果"中,我们可以找到一系列示例,涵盖了多种jQuery的...

    jquery插件库大全(200个).zip

    jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery分类导航 jquery加载动画插件 jquery华丽的css3滚动 jquery商品分类选择 jquery图像剪辑 ...

    jQuery钢琴动画效果的二级下拉导航菜单代码

    本项目涉及的是一个使用jQuery实现的创新性二级下拉导航菜单,它以钢琴键盘为灵感,赋予了菜单独特的动画效果。接下来,我们将详细讨论这个jQuery钢琴动画效果的二级下拉导航菜单的相关知识点。 首先,jQuery是一个...

    Jquery 图片展示效果

    二、图片轮播效果 1. 基本轮播:利用 jQuery,可以创建一个简单的图片轮播,通过定时器(`setInterval()`)改变图片的显示。例如,可以使用 `.fadeOut()` 和 `.fadeIn()` 方法实现图片的淡入淡出效果。 2. 导航按钮...

    jquery效果经典效果

    本篇文章将深入探讨"jquery效果经典效果"这一主题,涵盖标题和描述中提及的知识点,并结合压缩包内124种效果的文件名,为读者提供一个全面的jQuery特效指南。 一、选择器与遍历 jQuery的选择器是其强大之处之一,它...

    jquery按钮跳动效果

    在本文中,我们将深入探讨如何实现“jquery按钮跳动效果”,一种模仿百度有啊网站上常见Flash风格的动态效果。这种效果通常用于吸引用户的注意力,使按钮在视觉上更具吸引力。我们将围绕jQuery库来讲解这一效果,并...

    jquery翻屏效果的各种效果

    二、jQuery翻屏效果的实现原理 翻屏效果,通常称为滑动切换或页面滚动效果,是一种常见的网页动态展示手法。利用jQuery,我们可以实现平滑的页面滚动,使得内容在用户滚动时以动画形式展示。这种效果可以通过监听...

    jquery 菜单效果

    在网页设计中,jQuery 菜单效果是增强用户体验、提供直观导航的重要组成部分。jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得创建动态菜单变得更加简单。本篇文章将深入...

    jQuery动画垂直折叠导航效果

    而jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,包括垂直折叠导航。本篇将深入探讨如何利用jQuery创建一个动画垂直折叠的导航菜单。 首先,我们需要理解jQuery的基本用法。jQuery的核心...

    [jQuery实战第二版].pdf

    - 动画效果和jQuery UI的使用。 3. **AJAX集成**: - 使用jQuery进行异步数据加载。 - AJAX请求的最佳实践。 4. **事件处理与插件开发**: - 事件绑定与解绑机制。 - 创建可重用的jQuery插件。 5. **综合案例...

    jquery翻书效果源码

    二、翻书效果原理 翻书效果是通过模拟书页的翻转运动,让网页元素呈现3D视角变化。这通常涉及到CSS3的transform属性,用于改变元素的位置、大小和形状。同时,利用transition属性实现平滑的过渡动画,以及...

    jquery灯箱效果.zip

    二、CSS样式在灯箱效果中的作用 CSS(Cascading Style Sheets)样式在构建灯箱效果中起到至关重要的作用。通过CSS,我们可以定义灯箱的外观,包括其大小、位置、背景颜色、边框、阴影等属性。此外,CSS还用于控制...

    jquery二级菜单

    4. **动画效果**:jQuery的动画功能使得二级菜单的展开和收起更加平滑。例如,可以使用`fadeIn()`和`fadeOut()`方法实现子菜单的淡入淡出效果,或者用`slideToggle()`方法实现滑动切换。 5. **结构设计**:二级菜单...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    jQuery实现二级导航效果

    本教程将详细讲解如何利用jQuery来实现二级导航的切换效果,使得页面交互更加直观和友好。 首先,我们需要理解jQuery的基础知识。jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画...

    jQuery个性动画二级下拉导航菜单.rar

    这个项目利用了JavaScript库jQuery 1.8.3的强大力量,结合精心设计的动画效果,为用户提供了直观且吸引人的二级下拉菜单。 jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax...

    锋利的jquery第二版源代码

    《锋利的jQuery第二版》是一本专注于jQuery技术的书籍,其源代码是学习和深入理解jQuery核心原理的重要资源。jQuery是一个广泛使用的JavaScript库,它极大地简化了网页的DOM操作、事件处理、动画效果和Ajax交互。这...

Global site tag (gtag.js) - Google Analytics