jQuery动画特效

最新推荐文章于 2024-05-16 10:00:15 发布

angel20082008

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量812

点赞数

jQuery中动画和特效的相关方法可以说为其添加了靓丽的一笔。开发者可以通过简单的函数实现很多特效，这在以往都是需要大量JavaScript代码开发的。本章主要通过实例，介绍jQuery中动画和特效的相关知识，包括自动显隐、渐入渐出、飞入飞出、自定义动画等。

1. 元素的显示与隐藏

- show()和hide()

2. 渐入渐出的变幻

- 再探show()和hide()

- fadeIn()和fadeOut()

3. 幻灯片效果

- slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

例题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>元素显示和隐藏.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("input:first").click(function(){
     $("p").hide();//隐藏
    });

    $("input:last").click(function(){
     $("p").show();//显示
    });
        });
    </script>

</head>

<body>
<input type="button" value="hide">
<input type="button" value="show">
<p>点击按钮查看效果</p>
<span>一段其他的文字</span>
</body>
</html>

    $("input:last").click(function(){
     $("p").show(1000);//显示
    });
        });
    </script>

</head>

<body>
<input type="button" value="hide">
<input type="button" value="show">
<p><img src="images/1.bmp" /></p>
<span>一段其他的文字</span>
</body>
</html>

       $("input:eq(0)").click(function(){
     $("img").fadeOut(3000);//逐渐fadeOut
    });

    $("input:eq(1)").click(function(){
     $("img").fadeIn(1000);//逐渐fadeIn
    });

    $("input:eq(2)").click(function(){
     $("img").hide(3000);//逐渐隐藏
    });

    $("input:eq(3)").click(function(){
     $("img").show(1000);//逐渐显示
    });
        });
    </script>

</head>

<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="hide">
<input type="button" value="show">

<p><img src="images/1.bmp" /></p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>幻灯片效果.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
   $(function(){
    $("input:eq(0)").click(function(){
     $("div").add("img").slideUp(1000);
    });

    $("input:eq(1)").click(function(){
     $("div").add("img").slideDown(1000);
    });

    $("input:eq(2)").click(function(){
     $("div").add("img").hide(1000);
    });

    $("input:eq(3)").click(function(){
     $("div").add("img").show(1000);
    });

   });
</script>
</head>

<body>
<input type="button" value="SlideUp">
<input type="button" value="SlideDonw">
<input type="button" value="Hide">
<input type="button" value="Show">

<div></div>
<img src="images/1.bmp">
</body>
</html>

angel20082008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画特效

jQuery中动画和特效的相关方法可以说为其添加了靓丽的一笔。开发者可以通过简单的函数实现很多特效，这在以往都是需要大量JavaScript代码开发的。本章主要通过实例，介绍jQuery中动画和特效的相关知识，包括自动显隐、渐入渐出、飞入飞出、自定义动画等。1. 元素的显示与隐藏- show()和hide()2. 渐入渐出的变幻- 再探show()和hide
复制链接

扫一扫