javascript-在利用Jquery的animate使图片旋转时animate无效

问题描述

在利用Jquery的animate使图片旋转时animate无效

我跟着慕课网上的一个教程学习,学习利用Jquery做图片旋转。
我做transform的时候,div发生了旋转,然而当我把transform换成animate的时候没有效果。
老师视频里面的animate发生了旋转。
我也不知道我错在了什么地方,查了很久。只能上来寻求帮助了。先谢谢大家了。

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <div id="test1"></div>
        </div>
    <script src="jquery-2.2.2.min.js"></script>
    <script src="jquery.transform-0.9.3.min.js"></script>
    <script src="test.js"></script>
    </body>
</html>

#test1{
width:100px;
height:300px;
background: black;
}

$(function(){
    //$("#test1").transform({rotate:"60deg"});
    $("#test1").animate({rotate:"60deg"});
});

解决方案

你的什么浏览器先。。jquery2+以上不支持ie8-。而且要用类库的方法,jquery的animate对h5属性支持有限

解决方案二:

【JQuery】animate()

时间: 2024-09-17 03:25:10

javascript-在利用Jquery的animate使图片旋转时animate无效的相关文章

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)_jquery

  <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="imag

使图片旋转的3种解决方案_基础知识

图片旋转效果的研究最近在项目中需要做图片的旋转功能,我研究了一下.下面来总结下图片旋转在各个浏览器的支持情况 一.图片旋转的方案 1)css3实现图片旋转功能:支持的浏览器有chrome,firefox:opera是不支持的. 具体代码为:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代码的意思就是将图片顺时针旋转90度,其实可以旋转任意的度数.但是支持css3的浏览器只有chrome,firefox3.6 ,safa

做图片旋转时出现Out of memory错误

问题描述 当我使用rotatetransform对图片进行旋转时,就会报Outofmemory错误,内存不足,如果不用rotatetransform就可以,或才能是图片小一些也可以.图片大小也就20M,我就不明白了,这图片也不算大啊,我的电脑有4G内存,为什么就报内存不足了Bitmapb=newBitmap(@"Z:新建文件夹HPG-20140711-A.jpg");Bitmapb2=newBitmap(b.Width,b.Height,b.PixelFormat);//在此处在任务管

JavaScript中利用jQuery绑定事件的几种方式小结_jquery

开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)_jquery

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.     3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的

jquery 预加载图片效果插件与实例

文章一款告诉你如何利用jquery 预加载图片的实例教程,同时你也可以根据它出制作出漂亮的jquery 预加载图片效果哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

Struts2+jquery.form.js实现图片与文件上传的方法_jquery

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

利用jQuery插件imgAreaSelect实现获得选择域的图像信息_jquery

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

PSD转HTML实例教程——利用JQuery插件实现图片滑动效果

之前一段时间,翻译了一些国外的PS网页设计教程,这些教程中都有一些共性,例如包含网页LOGO.导航菜单栏.图片滑动栏.版权信息等.其中在多个教程中都提到了利用JQuery插件实现图片滑动栏.于是在网上搜索了一番,发现类似的插件千千万万,都有各自的特色.故本教程挑选了其中的一个插件,进行讲解,并在后面结合实例讲解如何在PS中切片,在导出的网页中完成图片滑动栏栏的制作.   插件网址:http://slidesjs.com/ 插件示例网址:http://slidesjs.com/examples/s