`
zlpx
  • 浏览: 156877 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在JQuery 中用fadeToggle()设置动画的持续时间

html5jquery 
阅读更多

的例子展示了，你如何利用fadeToggle()设置渐变动画的持续时间。

 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
 
    <div id="nav">
        <input type="button" value="fadeToggle(1000) [ms]" onclick="$(para2).stop().fadeToggle(1000); // ms"/>
        <input type="button" value="fadeToggle('fast') [200ms]" onclick="$(para2).stop().fadeToggle('fast'); // 200ms"/>
        <input type="button" value="fadeToggle('slow') [600ms]" onclick="$(para2).stop().fadeToggle('slow'); // 600ms"/>
    </div>
 
    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio massa, vulputate sit amet auctor at, mollis at nisi.</p>
    <p id="para2">[fadeToggle]Fusce pretium, mauris nec euismod adipiscing, odio nibh aliquam turpis, vel dictum tortor leo eu libero. Mauris non feugiat risus.[/fadeToggle]</p>
    <p id="para3">Etiam luctus neque nec tortor mollis dignissim. Proin interdum laoreet risus in rhoncus. Praesent vel erat ligula, a auctor nulla.</p>
 
</body>
</html>

 

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery垂直时间轴动画特效.zip

    《jQuery垂直时间轴动画特效详解》 在网页设计与开发中，动态效果的运用往往能够提升用户体验，使得信息展示更加生动有趣。今天我们将探讨一种基于jQuery实现的垂直时间轴动画特效，它以其绿色主题和渐进式显示特性...

    jQuery网页波浪文字动画特效

    为了实现更多样化的波浪效果，你可以调整CSS关键帧中的参数，如改变动画的持续时间、延迟、速度曲线或位移值。同时，jQuery允许你根据用户交互（如点击、悬停）来控制动画的播放和暂停，增加更多互动性。 总结来说...

    TweenMax.js+jQuery弹性滑动动画进度条特效

    4. **CSS样式**：为了实现四种不同的效果，CSS在设置进度条的初始样式和动画效果上起着关键作用。可能涉及到的关键CSS属性包括`width`（控制进度条的长度）、`transition`（定义动画速度和过渡效果）、`transform`...

    jQuery旋转动画按钮

    在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。在本教程中，我们将探讨“jQuery旋转动画按钮”的实现，这可以为网页添加交互性和视觉吸引力。 ...

    jQuery数字滚动增加动画特效.zip

    它接受多个参数，包括要改变的CSS属性、动画持续时间、缓动函数以及完成动画后的回调函数。在这个项目中，数字滚动可能通过改变`textContent`或`innerHTML`属性实现。 9. **缓动函数**：缓动函数是动画中的一个重要...

    jQuery多元素组合动画滑动幻灯片.zip

    5. **定时器与事件**：为了实现自动切换，我们可以设置一个定时器，每隔一段时间执行切换动画。同时，为了增加用户交互，可以监听鼠标悬停或点击事件，手动触发幻灯片切换。 6. **导航控制**：通常，幻灯片会提供...

    jquery弹出层 动画

    3. **设置动画效果**：jQuery UI提供了多种动画效果，如淡入淡出。可以通过设置`dialog`方法的选项来实现，例如： ```javascript $("#dialog").dialog({ modal: true, // 创建模态对话框 autoOpen: false, // ...

    jQuery刷新页面数字动画特效

    这个函数接受多个参数，包括属性名、目标值、持续时间、缓动函数和回调函数。对于数字动画，可以改变`innerHTML`属性，如下所示： ``` $('#numberDisplay').animate({ number: targetValue }, { duration: 1000...

    jquery动画jquery动画

    jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画

    jQuery loading加载动画特效

    在"jQuery loading加载动画特效"中，我们主要探讨的是如何利用jQuery来实现页面加载时的动态效果，提升用户体验。 一、jQuery基本概念 jQuery是由John Resig在2006年创建的，它的核心理念是"Write Less, Do More"。...

    30 个 jQuery & CSS3 加载动画和进度栏插件

    在加载动画方面，jQuery提供了一系列简便的方法来创建动态效果，比如`.fadeIn()`, `.slideToggle()`, 和 `.animate()`等，这些方法可以轻松实现页面内容的平滑过渡，使用户在等待内容加载时不会感到枯燥乏味。...

    jquery实例超炫animate动画效果

    在JavaScript的世界里，jQuery库以其简洁的语法和强大的功能，为开发者提供了丰富的工具来实现复杂的网页交互和动画效果。这个“jquery实例超炫animate动画效果”主题，将着重讲解如何利用jQuery的`animate()`方法来...

    6种jQuery导航栏滑动动画效果

    在本项目中，主要涉及的是jQuery的动画效果部分。jQuery提供了`.slideUp()`, `.slideDown()`, `.slideToggle()`, `.fadeIn()`, `.fadeOut()`, 和`.fadeToggle()`等方法，这些方法可以实现元素的滑动和渐变效果。例如...

    jQuery数字变换播放动画.zip

    8. **响应式设计**：考虑到不同设备的屏幕尺寸和分辨率，该项目可能采用了媒体查询（media queries）或其他方法，使数字动画在各种设备上都能良好地展示。 9. **CSS3动画**：除了使用jQuery，现代浏览器支持CSS3...

    jQuery文字星星闪烁动画特效

    本文将深入解析一款基于jQuery实现的文字星星闪烁动画特效，该特效利用SVG（Scalable Vector Graphics）技术，允许我们自定义星星的颜色、边框色、大小以及延迟时间等属性，从而打造出个性化且引人入胜的视觉效果。...

    jquery经典实例60例-动画实例

    11. `duration`参数：动画持续时间，可以是毫秒数或预定义的字符串（如"fast", "slow"）。 12. `easing`参数：可选的缓动函数，用于改变动画的速度曲线，如`$("#element").fadeIn(1000, "easeInOutQuad")`。 通过...

    jQuery彩色心形冒泡动画特效.zip

    【jQuery彩色心形冒泡动画特效】是一种使用JavaScript库jQuery创建的互动视觉效果，它将心形图标设计成彩色的气泡，这些气泡在网页上以动态的方式向上浮动，为用户带来生动有趣的视觉体验。这个特效适用于各种场合，...

    jQuery动画下拉菜单Smart Menu

    它充分利用了jQuery的事件处理和动画功能，使得菜单在用户交互时能有流畅的过渡效果，从而提高用户的操作体验。此外，Smart Menu还强调了响应式设计，使其能够在不同设备和屏幕尺寸上表现良好。 二、jQuery与下拉...

Magicbox
Global site tag (gtag.js) - Google Analytics