Jquery动画第二部分

效果图:

    →→→→→→

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

<style>
#div2
{
transform:rotate(30deg); /*transform 变换:旋转30度*/
}
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="display:none" class="panel">
        只有点击按钮后我才会显示出来!!
            </div>
        <input id="Button1" type="button" value="点我" onclick="slideToggle() "/>
        <br/>
        <br/>
        <br/>

         <input id="Button2" type="button" value="点我图片会动哦!!" />
        <div style="background:#98bf21;height:100px;width:100px;position:absolute;" id="animate"> </div>
       <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <ol>
        <li>这是1</li>
         <li>这是2</li>
         <li>这是3</li>
          </ol>
  <input id="Button3" type="button" value="点我就会追加列表" />

        <div id="css" style="background-color:red;width:200px;height:100px;">
            <p id="p1">改变css属性</p>
            </div>

<div id="div2" style="width:200px;height:100px;background-color:#00ff21">
</div>

    </div>
    </form>
</body>
</html>
<script src="jquery-1.11.2.min.js"></script>
<script>

    //简单的slide panel效果
    function slideToggle()
    {
        $(".panel").slideToggle("slow");
    }

    //简单的animate效果
    $(document).ready(function () {
        $("#Button2").click(function () {
            var div = $("#animate");  //animate 驱动效果
        div.animate({ height: ‘300px‘, opacity: ‘0.4‘ }, "slow");
        div.animate({ width: ‘300px‘, opacity: ‘0.8‘ }, "slow");
        div.animate({ height: ‘100px‘, opacity: ‘0.4‘ }, "slow");
        div.animate({ width: ‘100px‘, opacity: ‘0.8‘ }, "slow");
        })
    })

    //追加列表项
    $(document).ready(function () {
        $("#Button3").click(function () {
            $("ol").append("<li>Appended item</li>");  //Append追加
            //$("ol").before("<li>Appended item</li>");  //before 在……之前追加文本
            //$("ol").after("<li>Appended item</li>");//before 在……之后追加文本
        })
    })

    //改变css属性
    $(document).ready(function () {
        $("#css").click(function () {
            alert($(this).css("background-color"));//获取颜色
                $(this).css("background-color", "yellow"); //改变单个属性
            //$("p").css({ "background-color": "blue", "font-size": "200%" }); //改变多个属性
        })
    })

    $("div#intro .head") //选择器选取哪些元素?
    //正确答案:id="intro" 的首个 div 元素中的 class="head" 的所有元素
    </script>
时间: 2024-10-07 08:02:58

Jquery动画第二部分的相关文章

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

深入学习jQuery动画控制

× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚至可以使用queue实现动画队列.但是,却缺少了对动画控制的介绍.动画产生后,描述动画状态.进行动画延迟.操作动画暂停等都是很重要的功能.本文将详细介绍jQuery动画控制 动画状态 当用户快速在某个元素多次执行动画时,会造成动画累积的现象.这时,就需要引入动画状态这个概念.判断元素是否处于动画状态

JQuery动画详解(四)

一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效.返回值jQuery示例显示所有段落 HTML 代码:<p style="display: none">Hello</p> jQuery 代码:$("p").show

jQuery动画实现原理

前言 jQuery动画是通过animate这个API设置执行的,其内部也是按照每一个animate的划分封装了各自动画组的行为, 包括数据过滤.缓动公式.一些动画默认参数的设置.元素状态的调整.事件的处理通知机制.执行等等 换句话说,我们可以把animate看作一个对象,对象封装自己的一系列属性与方法. jQuery可以支持连续动画,那么animate与animate之间的切换就是通过队列.queue,这个之前就已经详细的解释过了 动画的参数 jQuery的内部的方法都是针对API的处理范围设计

从零开始学习jQuery (七) jQuery动画-让页面动起来!

原文:从零开始学习jQuery (七) jQuery动画-让页面动起来! 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

jquery动画,基础以及我发现的新大陆

$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [, complete ] ) 参数介绍([]包裹的参数可省略) properties 类型: PlainObject 一个CSS属性和值的对象,动画将根据这组对象移动. duration (默认: 400) 类型: Numberor String 一个字符串或者数字决定动画将运行多久.(注:默认值:

jquery动画效果总结

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stopping").click(function(){ jQuery.fx.off = true;//禁用所有jquery的动画 }) 三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数 $("#

jquery动画切换引擎插件 Velocity.js 学习01

一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换在动画方面的最佳组合. Velocity.js支持IE8+.Chrome.Firef

Jquery动画效果设置大全

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> <style ty