`

Jquery菜单动画展示

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="jquery-1.3.1.js">
        </script>
        <script>
            $(document).ready(function(){
                $(".conbox h3").toggle(function(){       
				   
                    $(this).parent().nextAll().animate({
                        height: 'toggle',
                        opacity: 'toggle'
                    },{duration:"slow"});
                    return false;
                    
                }, function(){
                    $(this).parent().nextAll("").animate({
                        height: 'toggle',
                        opacity: 'toggle'
                    },{duration:"slow"});
                    return false;
                    //alert("test2");
                })
            })
        </script>
        <style>
             * {
                margin: 0;
                padding: 0
            } .m_t_8_import {
                margin-top: 8px !important
            }
            
            body {
                font-size: 12px;
                line-height: 18px;
                font-family: Tahoma;
                color: #333;
            } .conbox {
                width: 300px;
                margin: 0 auto;
                border: red 1px solid
            } .conbox .title_bar {
            } .conbox .title_bar h3 {
                background-color: green;
                color: #fff;
                line-height: 24px;
                font-weight: bold;
                padding-left: 15px;
                cursor: pointer;
            } .text {
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div class="conbox">
            <div class="title_bar">
                <h3>标题1</h3>
            </div>
            <div class="text">
                可以看到,XHTML 1.0 Transitional的地位很暧昧,它的Transitional 使得其MAY text/html,SHOULD application/xhtml+xml。也就是说,怎么处理,实际上交由客户端(client side)来决定。在我所见到的桌面浏览器中,它们都毫不犹豫地选择text/html,这跟它们一贯的宽容风格保持一致。 
                但是很不幸的是,就有这么一个浏览器,Opera for mobile,从8.0开始,凡是声明了XHTML的Doctype,它都一律以application/xhtml+xml来处理。所以,你那不良构的网站,只好在它上面显示出错信息。  
                所以,推荐使用XHTML 1.0 Transitional,是鼓励你从HTML向XHTML转化,且保持过渡性。但过渡性并不代表你就可以不重视XML的良构。 
            </div>
			<div>2222222 area</div>
			<div>33333 area</div>
        </div>
        <div class="conbox m_t_8_import">
            <div class="title_bar">
                <h3>标题22</h3>
            </div>
            <div class="text">
                可以看到,XHTML 1.0 Transitional的地位很暧昧,它的Transitional 使得其MAY text/html,SHOULD application/xhtml+xml。也就是说,怎么处理,实际上交由客户端(client side)来决定。在我所见到的桌面浏览器中,它们都毫不犹豫地选择text/html,这跟它们一贯的宽容风格保持一致。 
                但是很不幸的是,就有这么一个浏览器,Opera for mobile,从8.0开始,凡是声明了XHTML的Doctype,它都一律以application/xhtml+xml来处理。所以,你那不良构的网站,只好在它上面显示出错信息。  
                所以,推荐使用XHTML 1.0 Transitional,是鼓励你从HTML向XHTML转化,且保持过渡性。但过渡性并不代表你就可以不重视XML的良构。 
            </div>
        </div>
    </body>
</html>


分享到:
评论

相关推荐

    jquery菜单简洁动画_修改

    在这个“jQuery菜单简洁动画_修改”的主题中,我们将关注于菜单的实现和优化。 首先,我们需要了解基本的HTML结构来构建菜单。一个常见的菜单通常包含一个`&lt;ul&gt;`元素作为容器,里面包含一系列的`&lt;li&gt;`元素表示各个...

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

    "jQuery个性动画二级下拉导航菜单"就是一个专为提升用户体验而设计的交互式菜单方案。这个项目利用了JavaScript库jQuery 1.8.3的强大力量,结合精心设计的动画效果,为用户提供了直观且吸引人的二级下拉菜单。 ...

    jQuery动画下拉菜单

    jQuery动画下拉菜单是一种常见的网页交互元素,常用于网站导航,提供层次清晰、用户体验良好的菜单系统。在网页设计中,jQuery库因其强大的DOM操作、事件处理和动画效果而备受青睐,尤其是在实现动态下拉菜单方面。 ...

    jquery菜单简洁动画

    本篇文章将详细讲解如何利用jQuery创建一个简洁且具有动画效果的菜单。 首先,理解jQuery的核心概念是至关重要的。jQuery通过其简洁的语法使JavaScript编程变得更加简单,比如使用"$"符号作为库的入口点,使得选择...

    jquery和CSS3带弹性动画效果的工具栏菜单

    本项目聚焦于利用jQuery和CSS3创建具有弹性动画效果的工具栏菜单,旨在提升用户体验并增加网页的交互性。 jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及AJAX交互。在本项目中,...

    jQuery动画下拉菜单Smart Menu

    《jQuery动画下拉菜单Smart Menu深度解析》 在网页设计中,下拉菜单是一种常见的交互元素,它能够有效地节省空间并提升用户体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来实现这种效果,其中“jQuery...

    jQuery竖排动画手风琴折叠菜单栏代码.zip

    《jQuery竖排动画手风琴折叠菜单栏代码详解》 在网页设计中,交互性和用户体验是至关重要的元素,其中一种常见的交互元素就是手风琴菜单。手风琴菜单以其独特的折叠效果,使得大量信息得以在有限的空间内有序展示,...

    jQuery圆形动画展开图标菜单代码

    本篇将详细介绍一个基于jQuery的圆形动画展开图标菜单的设计与实现,该菜单在收拢时仅显示一个小按钮图标,点击后会以动态效果展开,展示在中心小按钮四周的圆环上的各个菜单项。 ### 一、jQuery基础 jQuery是一个...

    jQuery滑块动画菜单 点击带发光动画

    在本文中,我们将深入探讨如何使用jQuery来创建一个具有滑块动画效果的菜单,并且当用户点击时,菜单项能够呈现出吸引人的发光动画效果。jQuery作为一个强大的JavaScript库,提供了丰富的功能,使得动态交互和动画...

    jQuery动画效果多功能菜单

    "jQuery动画效果多功能菜单"是一个专为学习设计的项目,它展示了如何利用jQuery创建出吸引人的、具有动画效果的菜单,以增强用户体验并提升网页的视觉吸引力。 jQuery中的动画功能主要通过几个核心函数来实现,如`...

    jQuery变形动画导航下拉菜单代码

    在网页设计中,导航菜单是用户与网站交互的重要部分,而使用jQuery实现的变形动画导航下拉菜单可以提升用户体验,让交互过程更加生动有趣。本文将深入探讨如何利用jQuery技术制作这种具有动态变形效果的下拉菜单。 ...

    jquery右侧边固定层导航菜单依次动画滑动显示菜单展开

    本主题聚焦于使用jQuery实现一种特殊的导航菜单——“右侧边固定层导航菜单依次动画滑动显示菜单展开”。这种菜单设计能提升用户体验,因为它的动画效果使用户界面更加生动有趣。接下来,我们将深入探讨这个话题。 ...

    jquery鼠标悬浮动画菜单

    "jquery鼠标悬浮动画菜单"是指利用jQuery实现的一种动态效果,当鼠标悬停在菜单项上时,菜单会呈现出特定的动画效果,提升用户的交互体验。 在创建这种效果时,首先我们需要在HTML中构建基础的菜单结构,通常是一个...

    jQuery竖排动画手风琴折叠菜单栏代码

    《jQuery竖排动画手风琴折叠菜单栏代码详解》 在网页设计中,为了提高用户体验和界面的交互性,各种动态效果被广泛应用。其中,手风琴折叠菜单栏是一种常见的导航设计,它允许用户逐个展开或收缩菜单项,节省空间且...

    jquery 菜单效果

    综上所述,jQuery菜单效果的实现涵盖了HTML、CSS和JavaScript的综合运用,涉及事件处理、动画效果、DOM操作等多个方面。通过对描述中提及的三个不同效果的分析,我们可以了解到在实际开发中如何灵活运用jQuery来创建...

    jQuery旋转动画按钮

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

    jQuery动画效果鼠标响应菜单.zip

    总的来说,"jQuery动画效果多功能菜单"是将jQuery的强大功能与CSS3的视觉魅力相结合的一个优秀示例,它展示了如何通过现代Web技术来提升网页的互动性和美学价值。对于开发者来说,这是一个值得学习和借鉴的实践案例...

    jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表

    jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表

    jQuery动画效果悬浮菜单.zip

    "jQuery动画效果悬浮菜单.zip" 是一个专门用于创建动态、吸引人的网站菜单的资源包,利用了JavaScript库jQuery的强大功能。jQuery简化了HTML文档遍历、事件处理、动画效果和Ajax交互,使得开发复杂的网页交互变得...

    jquery各种菜单插件源码与示例

    一、jQuery菜单插件的基本原理 jQuery菜单插件通常是通过CSS样式和JavaScript逻辑来实现的。它们利用jQuery的选择器功能选取HTML元素,然后通过CSS类的添加和删除来改变元素的显示状态,实现菜单的展开和收起。同时...

Global site tag (gtag.js) - Google Analytics