[英]Jquery easing and animation
I grabbed this compact news reader from here Below is the code for animating the ease in and ease out of the previews as the links are clicked on. 我从这里抓取了这个紧凑的新闻阅读器,下面是用于在单击链接时对预览的轻松进行动画处理的代码。 I change the dimensions of the whole page from a height of 300 to 600. I did some googling and the animate part of jquery animates a CSS property of the element.
我将整个页面的尺寸从300的高度更改为600。我做了一些谷歌搜索,并且jQuery的动画部分为该元素的CSS属性设置了动画。 So I worked from there.
所以我从那里开始工作。 Thought I had things working but I didn't so I thought I would start from scratch again.
以为我有工作的事情,但我没有,所以我想我会从头开始。
Could any one explain this as it reads? 有人可以解释这一点吗? For example, and I'm just guessing, "animate page element's top css to -300px... the rest of the line I don't understand.
例如,我只是在猜测,“将页面元素的顶部CSS动画化为-300px ...其余的行我不理解。
Thank you for any help, harassment, or pointers. 感谢您的帮助,骚扰或指点。
$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
sdfadssf sdfadssf
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);
$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
if(idx > current){
$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
}
else if(idx < current){
$current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
}
current = idx;
});
});
Ill explain; 病态的解释;
$current. //the element you are on
stop(). //stop all running animations
animate( //start a new animation
{'top':'-300px'}, //animate till this element's top style is -300px
600, //the animation will take 600ms
'easeOutBack', //it will use the EaseOutBack easing function
function(){ //callback, that gets called as soon as the animation finishes
$(this).css({'top':'310px'}); //set the element's top style to 310px
}
);
so in other words, this function doesn't do anything very smart. 因此,换句话说,此功能不能做任何非常聪明的事情。 It animates and in the end it jumps to a different place anyway.. regardless, hope I helped :)
它动画了起来,最后它还是跳到了一个不同的地方..无论如何,希望我有所帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.