Home  >  Article  >  Backend Development  >  animate 动画出现抖动效果,怎么解决?

animate 动画出现抖动效果,怎么解决?

WBOY
WBOYOriginal
2016-06-23 13:12:163051browse

animate 动画出现抖动效果,怎么解决?求大神帮忙!


回复讨论(解决方案)

坐等大神帮忙!!!

就一句话?谁知到你遇到了什么问题?

animate 中文释义:动画

我用animate想实现图片远到近或由近到远的效果,但是当变化的时候,图片有抖动,我想让纯粹的实现由远到近或由近到远的效果,不要抖动。

就一句话?谁知到你遇到了什么问题?

animate 中文释义:动画

<div class="banner clearfix">		<div id="huandp"> <script type="text/javascript">    var num=0;    var arr=["images/sy_banner.jpg","images/501.jpg","images/919.jpg"];    var urls=["http://www.25mj.com/huodong/151212/index.php?status=0","http://www.25mj.com/huodong/151107/index.php?status=0","http://www.25mj.com/huodong/150919/index.php?status=0"];	function bian(){		$('.img').animate({                    width:"110%",                    height:"105%",                    marginLeft:"-80px",                    marginTop:"0px"                },10000);		$('.img').animate({                    width:"100%",                    height:"100%",                    marginLeft:"0px",                    marginTop:"0px"                },10000);	}		    function change(){	        var n=$(this).index();        if(n==-1){            num++;            if(num>=3){                num=0;            }            var k=num;        }else{            var k=$(this).index()-2;            num=k;        }	        var path=arr[k];	var url=urls[k];        $("#huandp img").attr("src",path);	$("#huandp a").attr("href",url);        $("#huandp div").css("color","#abcdef");        $("#huandp div:eq("+k+")").css("color","pink");	bian();    }	    $().ready(function(){	bian();        $("#huandp div").mouseover(change);        $("#huandp div").mouseout(function(){		$("#huandp img").attr("src",arr[0]);		$("#huandp a").attr("href",urls[0]);        	$("#huandp div").css("color","#abcdef");       		$("#huandp div:eq("+0+")").css("color","pink");	})    })</script>    <a href="http://www.25mj.com/huodong/151212/index.php?status=0"><img  src="images/sy_banner.jpg" class="img"/ alt="animate 动画出现抖动效果,怎么解决?" > </a>	    <div id="div1"   style="max-width:90%">●</div>    <div id="div2">●</div>    <div id="div3">●</div></div>

这是我的代码

什么软件?怎么做的?

什么软件?怎么做的?


就是纯粹的js加css3里的animate方法,但是animate实现的效果有点抖动

有人遇到过吗?

据我观察,似乎没有问题
可能是图片太大了吧

据我观察,似乎没有问题
可能是图片太大了吧

,但是它抖动的显得不美观,有什么办法能解决掉?

据我观察,似乎没有问题
可能是图片太大了吧


你看下是不是这个里边的参数值设置不合理,导致混乱而致的?
function bian(){
        $('.img').animate({
                    width:"110%",
                    height:"105%",
                    marginLeft:"-80px",
                    marginTop:"0px"
                },10000);
        $('.img').animate({
                    width:"100%",
                    height:"100%",
                    marginLeft:"0px",
                    marginTop:"0px"
                },10000);
    }

据我观察,似乎没有问题
可能是图片太大了吧

或者还有没有其它的办法实现图片轮播的时候显示由近到远或由远到近的效果,求帮忙解决一下。

$("#ID").stop().animate,执行了试试看

$("#ID").stop().animate,执行了试试看


加了stop() 效果都变了,但是还有抖动。

头部加这个试试
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn