码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 动画的执行

时间:2015-11-17 18:56:32      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:

jQuery 动画的执行

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel=‘stylesheet‘ type="text/css" href=‘b/css/bootstrap.css‘>
<style type="text/css">
    .s1{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: relative;
    }
    .s2{
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>
</head>
<body style="margin:1px;">
    <div id="div001" class=‘s1‘>div001</div>
    <div id=‘div002‘>div002</div>
    <div id=‘div003‘>div003</div>
    <div>
        <button id="btn001">click me to hide div001 </button>
        <button id="btn002">click me to show div001 </button>
        <button id="btn003">click me to fadeIn div001 </button>
        <button id="btn004">click me to fadeOut div001 </button>
        <button id="btn005">click me to slideDown div001 </button>
        <button id="btn006">click me to slideUp div001 </button>
        <button id="btn007">click me to animate div001 separately </button>
        <button id="btn008">click me to animate div001 synchronisation </button>
        <button id="btn009">click me to animate div001 and css it </button>
        <button id="btn010">click me to animate div001 and fn to css it </button>
        <button id="btn011">click me to stop div001 animate </button>
        <button id="btn012">click me to bind div001 hover animate without stop</button>
        <button id="btn013">click me to bind div001 hover animate with stop</button>
        <button id="btn014">click me to bind div001 hover animate with stop</button>
        <button id="btn015">click me to bind div001 hover animate with stop(true)</button>
        <button id="btn016">click me to get animated div</button>
        <button id="btn017">click me to use delay</button>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index044.js"></script>
</body>
</html>

 

$(function() {
    $(‘#btn001‘).click(btn001Click);
    $(‘#btn002‘).click(btn002Click);
    $(‘#btn003‘).click(btn003Click);
    $(‘#btn004‘).click(btn004Click);
    $(‘#btn005‘).click(btn005Click);
    $(‘#btn006‘).click(btn006Click);
    $(‘#btn007‘).click(btn007Click);
    $(‘#btn008‘).click(btn008Click);
    $(‘#btn009‘).click(btn009Click);
    $(‘#btn010‘).click(btn010Click);
    $(‘#btn011‘).click(btn011Click);
    $(‘#btn012‘).click(btn012Click);
    $(‘#btn013‘).click(btn013Click);
    $(‘#btn014‘).click(btn014Click);
    $(‘#btn015‘).click(btn015Click);
    $(‘#btn016‘).click(btn016Click);
    $(‘#btn017‘).click(btn017Click);
});
function btn001Click(e) {
    // 在div001已经隐藏的情况下,不会有动画显示,但是会立刻执行动画完成函数;
    $(‘#div001‘).hide(‘slow‘, function() {
        console.log(‘div001 hide slow‘);
    });
}
function btn002Click(e) {
    // 在div001已经显示的情况下,不会有动画显示,但是会立刻执行动画完成函数;
    // div001的宽、高、透明度都进行逐渐变化;
    $(‘#div001‘).show(‘slow‘, function() {
        console.log(‘div001 show slow‘);
    });
}
function btn003Click(e) {
    // 在div001已经显示的情况下,不会有动画显示,但是会立刻执行动画完成函数;
    // div001的宽、高都是一下子变成正常值,然后只有透明度从0逐渐变为正常值;
    $(‘#div001‘).fadeIn(‘slow‘, function() {
        console.log(‘div001 fadeIn slow‘);
    });
}
function btn004Click(e) {
    // 在div001已经不显示的情况下,不会有动画显示,但是会立刻执行动画完成函数;
    // div001的透明度从正常值逐渐变为0,然后宽、高一下子变成0;
    $(‘#div001‘).fadeOut(‘slow‘, function() {
        console.log(‘div001 fadeOut slow‘);
    });
}
function btn005Click(e) {
    // 高度从上到下逐渐增加,逐渐显示某个元素;
    $(‘#div001‘).slideDown(‘slow‘, function() {
        console.log(‘div001 slideDown slow‘);
    });
}
function btn006Click(e) {
    // 高度从下到上逐渐减小,逐渐隐藏某个元素;
    $(‘#div001‘).slideUp(‘slow‘, function() {
        console.log(‘div001 slideUp slow‘);
    });
}
// 对div001依次执行动画效果;
function btn007Click(e) {
    $(‘#div001‘).animate({
        left : ‘50px‘ // div001的position必须是relative/absolute才可以产生变化;
    }, 3000, function() {
        console.log(‘div001 animate left 50px slow‘);
    }).animate({
        height : ‘200px‘
    }, ‘slow‘, function() {
        console.log(‘div001 animate height 200px slow‘);
    }).animate({
        left : ‘+60px‘ // 这个相对于只往右侧移动了10px,都是相对于最开始的位置的;
    }, ‘slow‘, function() {
        console.log(‘div001 animate left +60px slow‘);
    }).animate({
        left : ‘+=60px‘ // 这个相对于又往右侧移动了60px,相对于当前的位置;
    }, ‘slow‘, function() {
        console.log(‘div001 animate left +=60px slow‘);
    });
}
// 同步执行的动画;
function btn008Click(e) {
    $(‘#div001‘).animate({
        left : ‘50px‘,
        height : ‘200px‘
    }, ‘slow‘, function() {
        console.log(‘div001 animate left, height‘);
    }).fadeOut(‘slow‘);// 自定义动画可以附加上系统自带的动画效果;
}
function btn009Click(e) {
    $(‘#div001‘).animate({
        left : ‘50px‘,
        height : ‘200px‘
    }, ‘slow‘, function() {
        console.log(‘div001 animate left, height‘);
    }).css(‘border‘, ‘5px solid blue‘);// 这样的css函数会在动画开始的时候立即执行;如果希望在动画执行完毕之后执行,需要使用回调函数;
}
function btn010Click(e) {
    $(‘#div001‘).animate({
        left : ‘50px‘,
        height : ‘200px‘
    }, 5000, function() {
        console.log(‘div001 animate left, height‘);
        $(this).css(‘border‘, ‘5px solid blue‘);// 这样css函数会在动画执行完毕之后执行;
    });
}
function btn011Click(e) {
    // 立刻暂停当前的动画,不会执行当前动画的回调函数,但是会继续执行动画队列中的下一个动画;
    // $(‘#div001‘).stop();
    // 立刻暂停当前的动画,并且清空了动画队列中的所有动画;不会执行任何动画的回调函数;
    // $(‘#div001‘).stop(true);
    // 当前动画立即完成,调用当前动画的回调函数,清空动画队列中的所有动画;
    $(‘#div001‘).stop(true, true);
}
function btn012Click(e) {
    // 这样的动画会有问题,如果鼠标快速移出的话,div001会把第一个动画执行完毕,再执行第二个动画;
    $(‘#div001‘).hover(function() {
        $(this).animate({
            height : ‘150‘,
            width : ‘300‘
        }, ‘slow‘);
    }, function() {
        $(this).animate({
            height : ‘22‘,
            width : ‘60‘
        }, ‘slow‘)
    });
}
function btn013Click(e) {
    $(‘#div001‘).hover(function() {
        $(this).stop().animate({// 增加了stop会把之前在执行的动画停止;
            height : ‘150‘,
            width : ‘300‘
        }, ‘slow‘);
    }, function() {
        $(this).stop().animate({
            height : ‘22‘,
            width : ‘60‘
        }, ‘slow‘)
    });
}
function btn014Click(e) {
    $(‘#div001‘).hover(function() {
        $(this).stop().animate({// 如果不增加stop(true),只能停止当前的动画,下一个动画队列还是会执行的;
            height : ‘150‘
        }, ‘slow‘).animate({
            width : ‘300‘
        }, ‘slow‘);
    }, function() {
        $(this).stop().animate({
            height : ‘22‘
        }, ‘slow‘).animate({
            width : ‘60‘
        }, ‘slow‘);
    });
}
function btn015Click(e) {
    $(‘#div001‘).hover(function() {
        $(this).stop(true).animate({// 增加了stop(true),可以把没有执行的动画队列清空;
            height : ‘150‘
        }, ‘slow‘).animate({
            width : ‘300‘
        }, ‘slow‘);
    }, function() {
        $(this).stop(true).animate({
            height : ‘22‘
        }, ‘slow‘).animate({
            width : ‘60‘
        }, ‘slow‘);
    });
}
function btn016Click(e) {
    // 这样会直接返回true,不能返回移动的对象;
    var obj = $(‘div‘).is(‘:animated‘);
    console.log(obj);
    // 这样可以得到正在移动的对象;
    var obj2=$(‘div:animated‘);
    console.log(obj2);
}
function btn017Click(e) {
    // 延迟一下动画的执行;
    $(‘#div001‘).slideUp(1000).delay(1000).slideDown(1000);
}

 

jQuery 动画的执行

标签:

原文地址:http://www.cnblogs.com/stono/p/4972324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!