正文
jquery动画效果,jquery动画效果点击让文字显现
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery 加载动画效果怎么做
有个很简单的方法
首先载入jquery
script src="
之后把body加上style
body style="display: none;"
然后添加script事件
script
$(document).ready(function(){
$('body').show(10000); // 1000等于1秒
});
/script
相关问答
Q1: 如何让jquery动画效果在屏幕滚动到指定位置才执行
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建一个模块，并设置其id为mycss。
3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。
4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。
5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document).height()-$(window).height()），如果到达页面底部，提示“已经到底部了”。
Q2: jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：
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程序设计有一定的借鉴价值。
