2 cswsg123 cswsg123 于 2016.04.05 16:13 提问

在利用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"});
});

2个回答

showbo
showbo   Ds   Rxr 2016.04.05 16:43

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

showbo
showbo 回复cswsg123: transform是别人写好的插件(jquery.transform-0.9.3.min.js)当然可以,jquery默认的animate对h5的动画支持有限
2 年多之前 回复
cswsg123
cswsg123 我换上了Jquery.1.12.1也无法工作,我用edge,safari和chrome分别做了试验 都无效。transform都可以实现。
2 年多之前 回复
CSDNXIAOD
CSDNXIAOD   2016.04.06 17:01

【JQuery】animate()
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jquery实现简单的图片翻转效果
鼠标经过图片图片翻转显示图片背后的文字(对于其中引用的jquery文件、图片,需要用自己的)         Title             *{margin: 0;padding: 0;}         div{width: 284px;height: 430px;margin: 30px auto;border: 1px solid #ccc;}      
jquery animate 的 left right top 动画失效
Hello! $("#block").animate({ left: '100px', top: '100px' }, 1000); 动画失效,很郁闷,后来网上找到答案,原因是要对 #block设置 #block{ position: absolute; }
jQuery中animate()对Firefox无效的解决办法
在使用 animate()做返回顶部的动画时,会出现对Firefox无效的情况,如: $('body').animate({scrollTop:'0'},500); 它对Chrome,IE,Opera 有效,而另一种情况: $('html').animate({scrollTop:'0'},500); 则只对Firefox有效。 如果需要对所有浏览器有效,则需要将两者结合
jQuery动画animate停止方法stop使用介绍
Panel *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} .head { padding: 5px; backgroun
jquery中的animate函数在ie中失效的原因
今天在做网站的时候,要做一个滑动的下拉效果 我的代码如下 html: 服务项目 网站定制 精心策划,用心服务,尽可能的满足客户需求! 微信营销
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
jQuery中animate()的方法可以去w3school查看,这里主要说一下:$("body").animate({"scrollTop":top})不被Firefox支持问题的解决。其实是使用body的:$("body").animate({"scrollTop":top})只被chrome支持,而不被Firefox支持。而使用html的:$("html").animate({"scrollT
对jQuery中的animate的left没有效果的笔记
首先这次遇到的问题是,animate中的left设置了没有效果,代码如下: html代码: 点击试试 jQuery代码: $(document).ready(function() { $("button").click(function() { $("img").animate({ left:"+=200px
关于JQuery animate()方法
html: 点击我 如果你想在一个涉及动画的函数之后来执行语句,请使用callback函数 css部分: 注意:使用animate函数时,为了能够影响元素的 top bottom left right 属性值,需先将position属性值设置为 relative 或者 absolute  .panel {
JQuery中animate的一些坑
autoanimate对auto支持的很不好,在做动画的时候很不方便。height,left等属性都不支持auto。 对于height在每次执行animate之前通过.height()方法读取一下就好。 对于left使用.position().left方法来读取。不过对于left来说还有一个问题,在改left或right之中的一个的时候需要把另一个置为auto,否则这两个会互相影响。positi
jQuery动画animate方法使用介绍
jQuery动画animate方法使用介绍 用于创建自定义动画的函数。  返回值:jQuery animate(params, [duration], [easing], [callback])  如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。paramsOptions一组包 含作为动画属性和终值的样式属性和及其