`

jquery stop动画的使用

阅读更多
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无档</title>
<script src="jq.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
</head>
<style>
#menu{
width:300px;
}
.haschildren{
padding:3px;
background-color:#999;
margin-bottom:11px;
}
div a{
z-index:-11px;
background:#666;
display:none;
float:left;
width:300px;
}
</style>
<body>
<div id="menu">
<div class="haschildren">
         <span>第一章</span>
        <a>javascript</a>
        <a>加入</a>
        <a>编写方法</a>
        <a>小结</a>
    </div>
    <div class="haschildren">
     <span>第二章</span>
    <a>jquery选择器是什么</a>
    <a>jquery的优势</a>
    <a>jquery选择器</a>
    <a>小结</a>
    </div>
  
</div>

</body>
</html>
$(document).ready(function(){
  $(".haschildren").hover(function(){
  //清空之前的动画并且把动画之前到末状态
  $(this).children("a").stop(true,true).slideDown(511).end()
  .siblings().children("a").stop(true,true).slideUp(111);
 
  },function(){
    $(this).stop(true,true);
   $(this).children("a").slideUp(1111);
  })

});
http://xinwenmm.co.cc
分享到:
评论

相关推荐

    jquery的动画效果

    也可以使用`.stop()`来立即停止当前正在执行的动画。 6. **回调函数**:每个动画方法都可以接受一个回调函数作为最后一个参数,当动画完成时执行。这对于链式动画和基于状态的交互非常有用。 7. **自定义动画**:...

    .jQuery动画效果

    合理地使用动画,避免在循环中调用动画方法,以及利用 `stop()` 来中断当前动画,都是优化性能的关键。 7. **动画的缓动效果** 缓动(easing)函数可以改变动画的速度曲线,使动画看起来更加自然。jQuery 自带了...

    jquery菜单简洁动画

    现在,我们使用jQuery来添加动画效果。jQuery提供了多种动画方法,如`fadeIn()`, `fadeOut()`, `slideToggle()`等。假设我们希望在用户鼠标悬停在菜单项上时,子菜单以滑动效果展开: ```javascript $(document)....

    jQuery动画下拉菜单

    压缩包中的"jquery-drill-down-menu-plugin"可能是一个已经封装好的jQuery下拉菜单插件,使用它可以快速构建动画下拉菜单,减少自定义代码的工作量。通常,这样的插件会提供一些配置选项,如动画速度、方向、触发...

    jQuery学习动画效果基础

    jQuery学习动画效果基础是指使用jQuery库来实现网页中的动画效果,包括显隐动画、滑块动画、淡入淡出动画和自定义动画等。通过掌握这些基本动画效果,可以丰富网页的交互性和视觉效果,提高用户体验。

    Jquery队列动画特效

    本文将深入探讨jQuery队列函数的使用以及如何创建动画特效,这对于初学者来说是一份宝贵的教程。 ### 1. jQuery的动画基础 在jQuery中,`animate()`方法是最基本的动画函数,它可以用于改变元素的CSS属性,如宽度...

    jquery动画特效大全

    在前端开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript操作DOM、处理事件、创建动画等功能。"jQuery动画特效大全"这个压缩包显然包含了大量利用jQuery制作的各种动画效果及其源码,对于...

    jquery实现广告动画源代码

    例如,可以使用`delay()`方法在动画之间添加延迟,使用`stop()`方法停止当前正在运行的动画,或者借助第三方插件如`jQuery.easing`扩展更多缓动函数。 总结一下,通过jQuery的`animate()`方法,我们可以轻松地创建...

    jquery加分动画效果.zip

    本资源"jquery加分动画效果.zip"显然是关于如何使用jQuery来创建动态的分数增加效果,这在游戏或者评分系统中常见。下面我们将详细探讨jQuery动画效果的实现方式以及与CSS的配合。 一、jQuery动画基础 1. `animate...

    jquery鼠标图片动画效果

    在本文中,我们将深入探讨如何使用jQuery框架来创建鼠标的图片动画效果。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及AJAX交互,使得开发者能够更高效地构建动态网页。 首先,要实现...

    jQuery过渡动画打开层窗口特效.zip

    在“jQuery过渡动画打开层窗口特效”中,最常使用的是`fadeIn()`和`slideDown()`,它们分别用于淡入和下拉展开元素,非常适合于创建层窗口的打开效果。 `fadeIn()`方法用于让选定的元素逐渐变得可见,接受一个可选...

    详解jQuery停止动画——stop()方法的使用

    如果有一系列连续的动画,且你想跳到最后一个动画的状态,需要在每个动画之间使用`stop(true, true)`来确保动画队列的正确处理。 举个例子,如果我们有以下代码: ```javascript $("div.content") .animate({...

    jQuery鼠标悬停3d菜单展开动画.zip

    《jQuery实现3D菜单展开动画详解》 在网页设计中,动态效果往往能提升用户体验,增加网站的吸引力。其中,jQuery库因其丰富的功能和简洁的API,成为了实现这些效果的首选工具。本教程将深入探讨如何利用jQuery实现...

    JQuery动画animate的stop方法使用详解

    JQuery的animate方法是...理解并熟练运用stop方法对于精细控制JQuery动画至关重要,这使得开发者能够创建更复杂、交互性更强的用户界面。在处理多个连续动画或者需要响应用户交互的场景时,stop方法的作用尤为突出。

    jQuery模拟抛物线轨迹动画

    利用jQuery和HTML5可以模拟很多数学中的函数图象,比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件,可以开始和暂停抛物线的运动,以及重新设置抛物线的参数。 下面简单...

    jquery动画效果导航栏

    在这个项目中,我们可能有一个名为`script.js`或类似的文件,它包含了使用jQuery实现动画效果的代码。在JavaScript中,我们使用`$(document).ready()`函数确保在页面加载完成后执行我们的代码。然后,我们可以使用...

    jquery鼠标悬停动画效果

    本教程将深入讲解如何使用jQuery来创建一个鼠标悬停时的动画效果,具体表现为当鼠标移到图片上方时,小图片会缓缓向上移动并最终静止。 首先,我们需要在HTML文件中引入jQuery库。这可以通过在头部添加CDN链接或者...

    jQuery.spin.js自定义页面加载Loading动画代码

    接下来,我们来看看如何使用jQuery.spin.js创建自定义的Loading动画: 1. **初始化设置**:在你的JavaScript代码中,通过$.fn.spin方法初始化动画。你可以传入一个预设的spinner选项(如'large'或'small'),或者...

    jQuery中常用动画效果函数(日常整理)

    9. jQuery的stop()方法:当多个动画依次执行时,stop()方法可以立即停止当前正在运行的动画,并可以选择清除元素上排队的动画,以便可以快速地切换到其他动画效果。 10. jQuery的toggle()方法:这个方法用于切换...

    【jQuery动画】停止动画、淡出淡出、自定义动画

    综上所述,jQuery为开发者提供了强大的动画功能,包括停止动画的stop()方法,方便易用的淡入淡出动画fadeIn()和fadeOut(),以及灵活的自定义动画animate()。这些工具使得创建丰富的用户交互和视觉效果变得更加简单。...

Global site tag (gtag.js) - Google Analytics