`
hsys
  • 浏览: 290533 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Jquery的几种动态效果(animate)

阅读更多
<html>
<head>
<title>animate</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		// 在一个动画中同时应用三种类型的效果
		$("#go").click(function(){
		  $("#block3").animate({ 
		    width: "200px",
		    height: "200px", 
		    fontSize: "20px", 
		    borderWidth: "1px",
		    top:"400px",
		    left:"400px",
		    opacity: "show"
		  }, 3000 );
		});
		
		$("#stop").click(function(){
			$("#block3").stop();
		});
		
		$("#right").click(function(){
		  $(".block").animate({left: '+50px'}, "slow");
		});
		
		$("#left").click(function(){
		  $(".block").animate({left: '-50px'}, "slow");
		});
		
		$("p").animate({
	    height: 'toggle', opacity: 'toggle'
	  }, "slow");
		
		$("#go1").click(function(){
		  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
		     .animate( { fontSize: '10em' } , 1000 )
		     .animate( { borderWidth: 5 }, 1000);
		});
		
		$("#go2").click(function(){
		  $("#block2").animate( { width: "90%"}, 1000 )
		     .animate( { fontSize: '10em' } , 1000 )
		     .animate( { borderWidth: 5 }, 1000);
		});
	 
	});
	
</script>

<style>
	.showDiv
	{
		width:100px;
		height:100px;
		border:1px red solid;
		display:none;
		position:absolute;
		left:50px;
		top:50px;
		color:#C7EDCC;
   	background-color:#C7EDCC;
   	filter: Alpha(Opacity=60);
    opacity: 0.6;
	}
	
	.block
	{
		width:200px;
		height:200px;
		border:1px red solid;
		position:absolute;
		left:100px;
		top:100px;
		color:#C7EDCC;
   	background-color:#C7EDCC;
   	filter: Alpha(Opacity=60);
    opacity: 0.6;
	}
</style>
</head>

<body>
<input type="button" value="run" id="go" />
<div id="block3" class ="showDiv">Hello!</div>
<input type="button" value="stop" id="stop" />

<br>

<input type="button" id="left" value="left"/> 

<input type="button" id="right" value="right"/>
<div class="block"></div>


<br>

<p>adjfksdjfl</p>

<br>

<input type="button" id="go1" value="Animate Block1" />
<input type="button" id="go2" value="Animate Block2" />
<div id="block1">Block1</div><div id="block2">Block2</div>

</body>
</html>



效果自己点击看看吧,我就不多说了。。

分享到:
评论
14 楼 kukuwuwu 2010-03-29  
很讨厌那些不尊重别人劳动成果的人
有问题就说问题,发什么牢骚啊!
发帖子本来就是让人交流的
不是让你们评论好坏的!
还有那些随便 给人投隐藏贴的人
一点都不尊重别人的劳动成果
13 楼 xinchen1224 2010-03-26  
我试过了,达到了楼主说的效果,呵呵,正好在学习这个,呵呵。
12 楼 iamlomen 2010-03-05  
yhjhoo 写道
在不同浏览器下竟然有乱码,垃圾


自己菜就別老亂評價別人,技術的路上最忌諱浮躁,那樣的話 你的路不會很長!
11 楼 ring09h 2010-02-05  
有颤抖效果,LZ难道没发现?
10 楼 orcl_zhang 2010-02-05  
左右,移动的效果不错。
9 楼 leafcold 2010-02-05  
试了一下,还不错。
8 楼 hsys 2010-02-04  
如果说我的程序测试不足和js错误,我真的没有办法了,我这边的IE8和Firefox都是好的,没有js错误,至于乱码,确实是我的文件有问题,不过我目前只是发现在Firefox的firebug下会出现乱码,在页面上不会的,这是因为我是用UtralEdit编写的程序,保存的时候,编码是默认的,所以有这个问题,大家可以不用我上传的文件,自己写一遍,也可以拷贝上面的。
7 楼 suny95210 2010-02-04  
发帖前,测试做的不足,错误很多
6 楼 xukunwzq 2010-02-04  
呵呵 我这下载下来后看不了,js错误。。。
5 楼 xiaojiit 2010-02-04  
看了一下,left,right 这个效果还可以 。
4 楼 haiyupeter 2010-02-04  
是不是用了linux?
3 楼 wing5jface 2010-02-04  
LZ我试过在IE6,firefox, chrome下浏览都没有问题,是不是没有取得正确的html造成?

我按楼主的附件文件保存为UTF-8格式,并添加在<head>部分添加
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2 楼 yhjhoo 2010-02-04  
在不同浏览器下竟然有乱码,垃圾
1 楼 wing5jface 2010-02-03  
楼主做的在线效果可以下述网页即时观看,的确很好用(主机0205已修复,看来要注重网站安全呵)
http://www.sh2999.com/sh/jqueryShow/animate/animate.html

简单将Jquery改用为Google加速载入
即由
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
改为-------->
<script src="http://www.google.com/jsapi" language="javascript">
</script>
<script language="javascript">
   google.load("jquery", "1.3.2");
</script>

相关推荐

    jquery实现动态背景效果

    记住,良好的代码组织和性能优化也是实现高效动态效果的关键,例如,避免过度使用动画以减少不必要的计算负担。现在,你已经掌握了使用jQuery实现动态背景效果的基础,不妨动手实践,创造属于自己的独特设计吧!

    几种jQuery动态图片加载效果

    本文将深入探讨几种使用jQuery实现的动态图片加载效果,并提供相关的代码示例。 1. **渐进式加载(Lazy Loading)** 渐进式加载是一种优化网页性能的技术,它只在图片进入浏览器视口时才开始加载。这对于拥有大量...

    jquery的几种使用方法

    本篇文章将详细探讨jQuery的几种使用方法,帮助你更好地理解和运用这一强大的工具来提升网页设计的效率和用户体验。 1. **DOM操作**:jQuery的核心功能之一就是对HTML文档对象模型(DOM)进行操作。通过选择器,如`...

    Jquery文档处理的几种效果

    **jQuery文档处理的几种效果详解** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作,使得开发者可以更加便捷地处理HTML文档。本文将深入探讨jQuery在文档处理方面的一些常见...

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用,尤其在内容分块...

    jqueryanimate图片无缝滑动javascript网页特效

    jQuery的`animate()`函数是实现动态效果的核心,它可以控制元素的样式属性(如位置、透明度等)随时间平滑变化,从而创建出各种动画效果。 在这个特效中,主要涉及以下几个关键技术点: 1. **图片轮播容器**:通常...

    jquery几种特效

    本文将详细探讨jQuery中的几种特效,帮助你更好地理解和运用这些功能。 一、淡入淡出(FadeIn/FadeOut) jQuery提供了FadeIn()和FadeOut()方法来实现元素的渐显渐隐效果。FadeIn()方法让元素逐渐变得可见,而...

    jQuery全屏视差滚动效果

    在实现jQuery全屏视差滚动效果时,主要涉及以下几个关键知识点: 1. **jQuery选择器**:jQuery提供了丰富的选择器,如ID选择器(`$("#id")`)、类选择器(`.class`)和元素选择器(`$("element")`),用于快速定位...

    JQuery实现动态滚动菜单效果

    6. **动画效果**:JQuery的`animate()`方法可以创建平滑的动画效果,如菜单项的淡入淡出或滑动。结合`scrollTop()`方法,可以控制滚动条的位置,实现平滑滚动到指定菜单项对应的内容区域。 7. **优化性能**:为了...

    jQuery流行广告效果

    jQuery库本身提供了一系列方法,如`.animate()`、`.fadeIn()`、`.slideUp()`等,用于创建各种动态效果。开发者可能会定义函数或编写事件处理器,以便在用户交互时触发广告的切换、淡入淡出或其他动态行为。 总结来...

    jquery 左右切换效果

    在网页设计中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码的编写,尤其是在处理复杂的用户交互和动画效果...通过深入理解并实践这些代码,可以进一步提升对jQuery和网页动态效果的掌握。

    jQuery图片排列动画效果

    描述中的“超酷jQuery图标排列动画效果”可能涉及到几种常见的jQuery动画技术,比如淡入淡出(`fadeIn()`, `fadeOut()`)、滑动(`slideToggle()`)或者自定义动画。这些动画可能应用于图片的加载、切换或者鼠标悬停事件...

    jquery插件库-jquery抽奖插件.zip

    1. 动画效果:抽奖插件的核心在于动态效果的呈现,如旋转、滚动、随机选择等。jQuery强大的动画功能使得这些效果得以流畅地实现,如使用`.animate()`方法进行平滑过渡。 2. 随机性:确保抽奖结果的公正性,插件通常...

    jquery学习必备10几种经典特效

    "jQuery学习必备10几种经典特效"是一个针对初学者和中级开发者的重要资源,它包含了一系列预封装的特效源码,可以帮助你快速掌握jQuery的核心功能和特效实现。 首先,我们来看一下“特效核心”。这个部分通常涵盖了...

    Jquery实习幻灯片效果

    幻灯片效果主要有以下几种类型: 1. **123数字效果**:这种效果通常用于显示幻灯片的当前页数和总页数,例如“1/3”,当用户切换幻灯片时,数字会随之更新,提供一个清晰的导航指示。 2. **卡片式滑动**:这种效果...

    jQuery animate easing使用方法图文详解

    如果在项目中只需要用到部分easing效果,为了减少文件大小和加载时间,可以只将需要的几种easing效果的JavaScript代码拷贝到自己的脚本文件中,而不是整个jQuery Easing Plugin文件。例如,如果你只需要"easeOutExpo...

    animate动画特效重复调用

    综上所述,`animate()`是jQuery中实现动态效果的重要手段,通过合理的重复调用,我们可以创建出各种复杂的动画场景。同时,理解并掌握不同的调用方式和控制技巧,有助于我们在项目中实现更加灵活和高效的效果。

    jQuery easing动画运动效果.zip

    jQuery默认提供了几种内置的easing效果: 1. `swing`:这是jQuery的默认缓动效果,模仿了传统物理运动的加速和减速,类似于钟摆的摆动。 2. `linear`:线性缓动,动画在整个过程中保持恒定的速度,没有加速或减速。 ...

    jQuery实现的图片滚动效果

    jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得开发者可以更加高效地创建动态和交互式的网页。我们将讨论以下几个关键知识点: 1. **jQuery基本概念**:首先,我们需要...

    JQuery 15种经典案例

    通过`$(window).scroll()`监听滚动事件,配合CSS样式改变,实现动态效果。 2. **图片轮播**:利用JQuery,可以构建各种类型的图片轮播插件,如Fade、Slide等过渡效果,结合定时器和索引控制,让图片展示更加生动。 ...

Global site tag (gtag.js) - Google Analytics