jquery动画效果大全,jquery中的动画方法有哪些
jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下:
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、宽城网络推广、小程序设计、宽城网络营销、宽城企业策划、宽城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供宽城建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
1.自制折叠内容块
内容块如下:
div
class="module"
div
class="caption"
span标题/span
img
src="rollup.gif"
alt="rollup"
title="rolls
up
this
module"/
/div
div
class="body"
近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武,恒大的惹不起不过尔尔,恒大失去了对其它球队压倒性的优势,能力下降是恒大霸主地位有所动摇的根源所在。
/div
/div
给img元素绑定点击事件。
$(function()
{
$('div.caption
img').click(function
()
{
//先找到img的父级元素,再找该父级元素的子元素
var
$body
=
$(this).closest('div.module').find('div.body');
if
($body.is(':hidden'))
{
$body.show();
}
else
{
$body.hide();
}
});
});
运行效果如下图所示:
切换元素的显示状态,还可以用toggle方法。
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle();
});
});
以上是没有动画效果的,有时候感觉会很唐突。实际上,show,hide,toggle方法都可以有动画效果。比如:
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow');
});
});
又比如:
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow',
function()
{
$(this).closest('div.module').toggleClass('rolledup',
$(this).is(':hidden'))
});
});
});
2.使元素淡入淡出
fadeIn(speed,
callback)
fadeOut(speed,
callback)
fadeTo(speed,
opacity,
callback)
3.上下滑动元素
slideDown(speed,
callback)
slideUp(speed,
callback)
slideToggle(speed,
callback)
4.停止动画
stop(clearQueue,
gotoEnd)
5.创建自定义动画
animate(properties,
duration,
easing,
callback)
$('.classname').animate({opacity:'toggle'},'slow')
如果写一个扩展函数。
$.fn.fadeToggle
=
function(speed){
return
this.animate({opacity:'toggle'},'slow');
}
6.自定义缩放动画
$('.classname').each(function(){
$(this).animate({
width:
$(this).width()
*
2,
height:
$(this).height()
*
2
});
});
7.自定义掉落动画
$('.classname').each(function(){
$(this)
.css("position","relative")
.animate({
opacity:
0,
top:
$(window).height()
-
$(this).height()
-
$(this).position().top
},'slow',function(){
$(this).hide();
})
});
8.自定义消散动画
$('.classname').each(function(){
var
position
=
$(this).position();
$(this)
.css({
position:
'absolute',
top:
position.top,
left:position.left
})
.animate({
opacity:
'hide',
width:
$(this).width()*5,
height:
$(this).height()*5
top:
position.top
-
($(this).height()
*
5
/
2),
left:
position.left
-
($(this).width()
*
5
/2)
},'normal');
});
9.队列中的动画
//动画插入队列
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('button').click(function(){
$('img').dequeue('chain');
//删除队列中的动画
})
cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration,
name)//为队列中所有未执行的动画添加延迟
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
[img]jQuery 幻灯片动画效果
showImg函数里面$("#JS_imgWrap").attr("href".newhref)这错了【attr("href".newhref)】,是逗号不是点,attr("href",newhref)
jQuery实现切换页面过渡动画效果
直接为大家介绍制作过程,希望大家可以喜欢。
HTML结构
该页面切换特效的HTML结构使用一个main元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条。
main
div
class="cd-index
cd-main-content"
div
h1Page
Transition/h1
!--
your
content
here
--
/div
/div
/main
div
class="cd-cover-layer"/div
!--
this
is
the
cover
layer
--
div
class="cd-loading-bar"/div
!--
this
is
the
loading
bar
--
CSS样式
该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位,高度等于50vh,宽度为100%。默认情况下,使用CSS
transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候,这些元素被移动回视口当中(通过在body元素上添加.page-is-changing
class)。
下面的图片演示了这个过程:
页面切换特效
body::after,
body::before
{
/*
these
are
the
2
half
blocks
which
cover
the
content
once
the
animation
is
triggered
*/
height:
50vh;
width:
100%;
position:
fixed;
left:
0;
}
body::before
{
top:
0;
transform:
translateY(-100%);
}
body::after
{
bottom:
0;
transform:
translateY(100%);
}
body.page-is-changing::after,
body.page-is-changing::before
{
transform:
translateY(0);
}
页面切换时,页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素,并具有相同的背景色,然后在body被添加.page-is-changing
class的时候,将透明度从0修改为1。
Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小(scaleX(0))和transform-origin:
left
center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。
.cd-loading-bar
{
/*
this
is
the
loading
bar
-
visible
while
switching
from
one
page
to
the
following
one
*/
position:
fixed;
height:
2px;
width:
90%;
}
.cd-loading-bar::before
{
/*
this
is
the
progress
bar
inside
the
loading
bar
*/
position:
absolute;
left:
0;
top:
0;
height:
100%;
width:
100%;
transform:
scaleX(0);
transform-origin:
left
center;
}
.page-is-changing
.cd-loading-bar::before
{
transform:
scaleX(1);
}
特效中平滑的过渡效果使用CSS
Transitions来实现。每一个动画元素都被添加了不同的transition-delay,以实现不同的元素动画顺序。
JAVASCRIPT
该页面切换特效中在链接上使用data-type="page-transition"属性,用于触发页面切换事件。当插件检测到用户点击事件,changePage()方法将被执行。
$('main').on('click',
'[data-type="page-transition"]',
function(event){
event.preventDefault();
//detect
which
page
has
been
selected
var
newPage
=
$(this).attr('href');
//if
the
page
is
not
animating
-
trigger
animation
if(
!isAnimating
)
changePage(newPage,
true);
});
这个方法会触发页面切换动画,并通过loadNewContent()方法加载新内容。
function
changePage(url,
bool)
{
isAnimating
=
true;
//
trigger
page
animation
$('body').addClass('page-is-changing');
//...
loadNewContent(url,
bool);
//...
}
当新的内容被加载后,会替代原来main元素中的内容。.page-is-changing
class被从body中移除,新加载的内容会被添加到window.history中(使用pushState()方法)。
function
loadNewContent(url,
bool)
{
var
newSectionName
=
'cd-'+url.replace('.html',
''),
section
=
$('div
class="cd-main-content
'+newSectionName+'"/div');
section.load(url+'
.cd-main-content
*',
function(event){
//
load
new
content
and
replace
main
content
with
the
new
one
$('main').html(section);
//...
$('body').removeClass('page-is-changing');
//...
if(url
!=
window.location){
//add
the
new
page
to
the
window.history
window.history.pushState({path:
url},'',url);
}
});
}
为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果,插件中监听popstate事件,并在它触发时执行changePage()函数。
$(window).on('popstate',
function()
{
var
newPageArray
=
location.pathname.split('/'),
//this
is
the
url
of
the
page
to
be
loaded
newPage
=
newPageArray[newPageArray.length
-
1];
if(
!isAnimating
)
changePage(newPage);
});
jquery跑马灯效果
要实现简单的跑马灯效果其实运用html中marquee/marquee标签就可以达到了
基本属性如下:
1.滚动方向direction(包括4个值:up、 down、 left和 right)
2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)
3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)
4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)
5.滚动循环loop(默认值是-1,滚动会不断的循环下去)
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
如果想要更多的动画效果,更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果
1.html 中写入ul id="marquee"li/li/ul
2.js中调入$("#marquee").marquee();即可
3.css比较简单,一般自己写,大致如下:
ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}
ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}
4.相关参数如下:
{
yScroll:"top"; // 初始滚动方向 (还可以是"top" 或 "bottom")
showSpeed:850; // 初始下拉速度
scrollSpeed:12; // 滚动速度
pauseSpeed:5000; // 滚动完到下一条的间隔时间
pauseOnHover:true; // 鼠标滑向文字时是否停止滚动
loop:-1; // 设置循环滚动次数 (-1为无限循环)
fxEasingShow:"swing"; // 缓冲效果
fxEasingScroll:"linear"; // 缓冲效果
cssShowing:"marquee-showing"; //定义class event handlers
init:null; // 初始调用函数
beforeshow:null; // 滚动前回调函数
show:null; // 当新的滚动内容显示时回调函数
aftershow:null; // 滚动完了回调函数
}
jquery 加载动画效果怎么做
有个很简单的方法
首先载入jquery
script src="
之后把body加上style
body style="display: none;"
然后添加script事件
script
$(document).ready(function(){
$('body').show(10000); // 1000等于1秒
});
/script
网页标题:jquery动画效果大全,jquery中的动画方法有哪些
转载源于:http://myzitong.com/article/dsoppsj.html