JQuery效果

来源：互联网发布：淘宝大学的vip课靠谱吗编辑：程序博客网时间：2024/06/06 04:20

JQuery效果

JQuery动画有四种效果：显示与隐藏、淡入与淡出、上滑与下滑、自定义动画。

1显示、隐藏

Heid()：隐藏

<body>
    <div id="div1">

    </div>
   <button id="btnHide">消失</button>
</body>
<script type="text/javascript">
    $("#btnHide").click(function() {
        $("#div1").hide(10000);
    });
</script>

将高度、宽度、透明度改变为0，display为“none”

Show():显示

<body>
    <div id="div1">

    </div>
    <button id="btnShow">显示</button>
</body>
<script type="text/javascript">
    $("#btnShow").click(function() {
        $("#div1").show(10000);
    });
</script>

将高度、宽度、透明度显示为初始的css设置的样式，display为“block”

Toggle()：切换

<body>
    <div id="div1">

    </div>
    <button id="btnToggle">切换</button>
</body>
<script type="text/javascript">
    $("#btnToggle").click(function() {
        $("#div1").toggle();
    });
</script>

如果display为none时，点击就会变成black，如果display为black时，点击后则为none。

2淡入、淡出

fadeIn():淡入

<body>
    <div id="div1">

    </div>
    <button id="btnFadeIn">淡入</button>
</body>
<script type="text/javascript">
    $("#btnFadeIn").click(function() {
        $("#div1").fadeIn(5000);
    });
</script>

将隐藏的样式通过改变其透明度（透明度从0到1），让他显示出来。

fadeOut()：淡出

<body>
    <div id="div1">

    </div>
    <button id="btnFadeOut">淡出</button>
</body>
<script type="text/javascript">
    $("#btnFadeOut").click(function() {
        $("#div1").fadeOut(5000);
    });
</script>

将显示的样式改变其透明度（透明度从1到0），让他隐藏起来。

fadeToggle():淡入、淡出的切换

<body>
    <div id="div1">

    </div>
    <button id="btnFadeToggle">切换</button>
</body>
<script type="text/javascript">
    $("#btnFadeToggle").click(function() {
        $("#div1").fadeToggle(500);
    });
</script>

如果样式是隐藏的，则将它显示出来；如果样式是显示的，则将它隐藏起来。

fadeTo():固定其透明度（透明度在0到1之间）

<body>
    <div id="div1">

    </div>
    <button id="btnFadeTo">固定透明度</button>
</body>
<script type="text/javascript">
    $("#btnFadeTo").click(function() {
        $("#div1").fadeTo(5000,0.8);
    });
</script>

将隐藏的样式通过改变其透明度（透明度从0到1），让他显示出来。

fadeOut()：淡出

将显示的样式改变其透明度（透明度从1到0），让他隐藏起来。

fadeToggle():淡入、淡出的切换

如果样式是隐藏的，则将它显示出来；如果样式是显示的，则将它隐藏起来。

fadeTo():固定其透明度（透明度在0到1之间）

3上滑、下滑

slideUp():上滑

将设置的高从初始边为0，然后隐藏它。

slideDown():下滑

先显示它，然后将设置的高度从0到初始。

slideToggle():上滑与下滑切换

如果元素是隐藏的，则先让它显示，然后把它的高度增加，如果元素是显示的话，先将高度减为0，,再让他隐藏

4动画

自定义动画

移动一个块到另一个位置

<body>
    <button>开始动画</button>
    <div id="p">

    </div>
</body>
<script type="text/javascript">
    $("button").click(function() {
        //设置多个css属性
        $("#p").animate({left:'300px',top:'300px'});
</script>

同时使用多个属性实现动画效果（移动位置和大小还有颜色）

<body>
    <button>开始动画</button>
    <div id="p">

    </div>
</body>
<script type="text/javascript">
    var p = $("#p");
        //设置相关属性
        $("#p").animate({
            left:'300px',
            width:'+=100px',
            height:'+=100px',
            opacity:'0.5'
        });
    });
</script>

改变预定义值来实现我们所需内容的显示或隐藏

//预定义值
$("#p").animate({
height:'toggle'
});

Animate()中有三个参数

第一个参数是需要改变样式

第二个参数是显示的速度（slow,fast 指定秒数）

第三个参数回调元素

<body>
    <button id="star">开始</button>
    <button id="end">结束</button>
    <div id="div1">

    </div>
</body>
<script type="text/javascript">
    var div = $("#div1");
    $("#star").click(function() {
       div.animate({height:'450px'},"slow");
       div.animate({width:'450px'},"slow");
        div.animate({height:'200px'},"slow");
       div.animate({width:'200px'},"slow");
    });
    $("#end").click(function (){
        div.stop(true);
    });
</script>

阅读全文

0 0