jquery问答特效,jq弹窗特效
请问JQuery常用的网站特效有哪些呢？
有很多，淡入淡出，轮播图，时光轴，反正就是一些翻来翻去滚来滚去的！！ 比如QQ空间里面的动画、基本上所有的网站都会用到Jquery！
jQuery如何实现动画特效
jq一般都是和html5结合才可以制作出特别绚的动画特效，当然如果一般的网页特效的话还是很容易实现的，比如图片切换，图片移动等等，当然网上也有很多现成的jq动画，自己可以直接拿来用，还有很多成型的jq插件
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程序设计有一定的借鉴价值。
请教jquery特效？
JQUERY库的版本把低的那个版本直接删除就好了。如果2个一起调用的话，一些淡入淡出效果会失效的，比如1.4.1就比1.7.1低的多！