`
zlpx
  • 浏览: 155366 次
  • 性别: 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动画jquery动画

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

    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. **导航控制**：通常，幻灯片会提供...

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