【jquery的animate()方法也可设置非css属性】的更多相关文章

jquery的animate()方法也可设置非css属性

如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-="+50},350); 还有其他的几个小例子: 禁用元素: $('button').attr('disabled', 'disabled'); $('button').removeAttr('disabled'); 遍历元素集合: $("input:text").each(function(…

jquery之 animate()方法详解

jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画. 例如:某个div元素的当前高度为100px,将其CSS height属性设为200px,animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画. 该函数属于jQuery对象(实例). 语法 jQuery 1.0 新增该函数.animate()…

jQuery的animate方法在IE8下出现小问题

今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试,都没问题: 然后毕竟要考虑IE的兼容性,开始在IE8下测试,然后就出现问题了,样式可以正常显示,但左右滑动的效果没了,百思不得其解,难道jquery的animate方法在IE8下有问题: 于是看animate的实现方式,无外乎就是改变div的margin-left属性值,源代码如下: $("#pr…

jQuery中animate()方法用法实例

本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如:  代码如下: $("div").animate( {width:"1000px"})   以上代码能够将div从原有的宽度调整到1000px.也可以一次性使用…

jquery动画控制非css属性

JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 $("#box").animate({height:"300px"},3000); 可以控制id为box的标签在3秒内将高度更改到300px.那么如果想要控制非CSS属性呢,比如说针对一些WebGl中的动画控制,如果使用setInterval倒是可以实现效果,但是太过麻烦.这个时候就可以使用animate方法,生成递进的值,自己获取值来控制一些非CSS属性,比如: //输出…

jQuery 效果 - animate() 方法

http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); 亲自试一试 定义和用法 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属…

使用jQuery的animate方法制作滑动菜单

周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴.我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行. 正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,…

jQuery的animate方法在IE7下出现小问题

接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊: 然后打开IE的F12工具,先看样式,再看滑动效果:本来应该显示4张图片,但只显示了一张,这个错误既然是显示的错误,那直接在调试工具里,对着这个div的有关左右的属性,修改就可以了: 修改后发现,原来是margin这里出问题了,原来的样式是 margin:10px auto; 修改margin-left和margin-right,把它们去掉就行了,但是这是全局样…

第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器 当前流行的JavaScript 库有 jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE.优势如下: 轻量级(压缩后只有几十k) 强大的选择器 出色的DOM 操作的封装 可靠的事件处理机制 完善的Ajax 出色的…

jquery操作html元素之（设置内容和属性）

设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 $("#btn1").click(function(){ $("#test1").text("Hell…

通过id设置的css属性和通过元素设置的css属性冲突了，优先级哪个高？

---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>div test</title> </head> <style> div{ height: 300px; width:200px; background: blue; } #main{ background: red; } #footer{ background:grey; } </style> <body…

如何确定要对DIV设置什么CSS属性样式呢？

设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想法来布局设置CSS,比如布局左右结构时候,那就设置float:left和float:right实现对象靠左靠右,然后思考靠左靠右布局宽度多少,再设置宽度样式. 这种情况下布局网页比较慢,想一点布局一点,可能在思考到布局成功后要达到理想美观效果,可能不断修改CSS样式参数达到细节调整,这样比较耗时,但…

关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后来百度了一些东西都没有找到关键所在,最后Google一下,找到了很多实用的解决方法,现在在这里总结一下,希望对有同样困惑的同学能够有所帮助. 可能的原因: (1)jQuery版本过于陈旧. solution: 更换新版本的jQuery包,但是更换之后记得测试你的代码,因为并不是所有的包都向后兼容.…

jQuery动画animate方法使用介绍

用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用的是“hide”. “show”或“togg…

jQuery的animate()方法做一个颜色的渐变

需求:在1秒内,由一个颜色变到另一个颜色,不是1秒后再变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=…

jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html").animate({"scrollTop":top}): 只被Firefox支持,而不被chrome支持. 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop"…

Jquery实现点击当前radio button设置选中属性，其它设置非选中属性

一.HTML代码: <div class="ques-tc-r" id="question_type"> <ul class="clearfix"> <li class="select-cur"> <input type="radio" value="1" name="question_type" checked="…

JQuery中$.ajax()方法参数详解 及 async属性说明

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项…

jQuery中animate的height的自适应

可以用 animate() 方法几乎可以操作大部分CSS 属性,但其属性的值不能为字符串,很多人都遇到过这个问题.   例如:获取一个元素自适应时的高,但el.animate({height:‘auto’})是没有效果的.   今天我也遇到了这个,花了点时间解决了这个问题,然后就想做个随笔,顺便给大家分享一下.   (菜鸟一只,第一次发随笔,不喜的尽量喷,嘻嘻)   解:使用css获取当前元素自适应时的高,然后就可以直接使用了. var h_header=header.css("height&q…

jQuery animate() 方法

定义和用法 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过 CSS 样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 提示:请使用 "+=" 或 "-=" 来创建相对动画. 语法 $(selector).animate({styl…

jQuery animate方法开发极客标签Logo动画融合效果

在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标签Logo动画融合效果…

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=…

js进阶 11-3 jquery中css属性如何操作

js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点就是css范围更广 css是样式中的width,attr是属性中的width. <img src="HTML5.png" alt="" width="100" border="2"> 如果image没有设置width属…

前端有用的CSS属性和JS方法

1.CSS属性: 透明属性(值越大越不透明): IE:filter:alpha(opacity:30) Google:opacity:0.3 层次属性(值大的会在上面): z-index:100 2.JS方法: 获取CSS属性: IE:obj.currentStyle[attr] Google:getComputedStyle(obj, false)[attr]…

JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法

思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部分.图片序号部分) <div id="lunbo"><!--1轮播部分--> <ul class="imglist"><!--2图片部分--> <li><img src="image/datu1…

jQuery 效果 - 动画 animate() 方法

我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'2…

用JQuery内置animate方法实现数字递增动画

平时使用animate只用于dom节点的动画,无意间发现JQuery内置的animate方法可实现数字动画,JQ还是挺强大的! 动画效果为从0一步步跳到84,代码如下: $({ // 起始值 countNum: 0 }).animate({ // 最终值 countNum: 84 }, { // 动画持续时间 duration: 3000, easing: "linear", step: function() { // 设置每步动画计算的数值 $('#num').text(Math.f…

jquery animate()方法 语法

jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").大理石平台怎么样字符串值无法创建动画(比如 " padding: 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 36…

JQUERY操作css与css()方法、获取设置尺寸；

一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </style> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落.</p> <button>给元素添加class属性</button> </body>…

jquery中html()或text()方法获取或设置p标签的值

html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容.要获取某个元素的内容,可以这样: var p_html = $("p").html(); //获取p元素的HTML代码 如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数.例如要设置p元素的HTML代码,可以使用如下…