jQuery显示隐藏动态效果的几种写法

<script type="text/javascript">
 $(document).ready(function() {
     /*$("#test1").click(function(){
        $("#test2").toggle("fast",function(){
            
        });
    });*/
        /* $("#test1").click(function(){
            $("#test2").toggle(5000,function(){
                
            });
        }); */
    /*     $("#test1").toggle(function(){
            $("#test2").show(5000,function(){});
        },function(){
            $("#test2").hide(5000,function(){});
        }); */
        
/*         $("#test1").click(function(){
            $("#test2").slideToggle("slow");
        });
         */
        
         $("#test1").toggle(function(){
             $("#test2").fadeTo(1000,0.3);    //透明度
         },function(){
             $("#test2").fadeTo(1000,0);
         });
});

</script>

<style type="text/css">

</style>
</head>

<body>
    <div>
        <ul>
            <li id="test1">什么是jQuery?</li>
            <ul id="test2" style="display: none;">
                <li style="width: 200px; ">
                    jQuery是继prototype之后又一个优秀的Javascript库。
                    它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器
                    (IE 6.0+, FF 1.5+, Safari 2.0+,
                     Opera 9.0+),jQuery2.0及后续版本将不再
                     支持IE6/7/8浏览器。
                </li>
            </ul>
        </ul>
        
    </div>
</body>

时间: 2024-11-10 01:34:11

jQuery显示隐藏动态效果的几种写法的相关文章

JQuery显示隐藏

主要用到了JQuery的slideToggle() 方法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 代码及效果如图所示(其中div和p标签的位置不同效果不同)

JQuery显示隐藏(学习他人方法后)

主要用到了JQuery的slideToggle() 方法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 代码及效果如图所示(其中div和p标签的位置不同效果不同) <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>  

jquery显示隐藏操作

记得还是当初开始学习jquery的时候有去用心看看文档,然后在做项目的时候偶尔有用到,一直没有闲暇之余去温习,去整理所谓的基础,看了后有些淡忘的得意再次更新. 第一.隐藏显示 以下所有的代码如无特殊声明中speed的值可选且可填写(slow,fast,number(毫秒)).callback为执行完后要执行的函数也是可选参数. $(selector).show(speed,callback); $(selector).hide(speed,callback); $(selector).toggl

jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle

<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><style>.bg1 {    background

jquery中隐藏div的几种方法

//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示display:none;    $("#id").toggle();//切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. //添加样式的方法    $("#id").css('display','none');    $("#id

jquery文档加载几种写法,图片加载写法

jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函数. $(window).load(function() { });//调用window对象下的load方法传入一个函数. (function() { })(jQuery)//()()表示立即执行 并且传入jquery = $ 所以之前$也可以替换为jQuery 注意: jquery的ready只是

jquery.validate remote验证另一种写法

function checkName() { var deferred = $.Deferred();//延迟方法 var Name = $("#name").val(); var Names = $("#names").val(); var Pid = $("#pNodeId").val(); var nodeId = $("#nodeId").val(); $.ajax({ type:"post", u

Jquery 获取第一个子元素 几种写法

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul> 获取第一个元素:  $("ul li:first-child") <div id="getfirst"> <ul>    <li>John</li>    <li>Karl</li>  

元素显示隐藏的9种思路

× 目录 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移 前面的话 在网页制作中,元素的显示隐藏是非常常见的需求.本文将介绍元素显示隐藏的9种思路 思路一: display 对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline.inline-b