JQuery动画和特效

来源：互联网发布：java项目代码例子编辑：程序博客网时间：2024/06/01 08:37

一、.offset()方法:

$("div").offset({ top: 100, left: 100 });

var post = $("div").offset();

$("div").html("居左：" + post.left + "居上：" + post.top);

二、显示隐藏（点击元素显示）

$("#message").click(function (e) {

e.stopPropagation(); //阻止当前事件在DOM上冒泡

$(this).hide();

});

$(document).click(function () {

$("#message").show();

});

三、滑动显示和隐藏

.slideUp()方法：上滑隐藏，.slideDown()方法：上滑显示 包含一个参数；

.fadeIn()方法：淡入隐藏；.fadeOut()方法：淡出显示

示例：

$("#message").slideUp('fast'); //参数分为：slow,normal,fast

$("#message").slideDown('fast');

四、元素尺寸

.resize()方法：窗口宽高改变时，触发事件

示例：

$("#message").resize(function(){

//编写窗口改变事件

});

.width()/.height()方法：$("#message").width(10); //宽度赋值为10

五、图片在移动的同时缩小并淡出页面

示例：

$(function () {

var winWidth = $(document).width(); //获取元素宽度

var duration = 1000;

$("#alien").click(function (event) {

$("#alien").animate({

opacity: 0,

width: 10,

height: 10, 

left: '500px'

}, duration);

});

});

<img src="images/index.jpg" id="alien" style="position: relative;left: 0;"/>

0 0