JQuery ослабление и анимация - PullRequest
Новая
       9

JQuery ослабление и анимация

0 голосов
/ 22 января 2012

Я взял этот компактный читатель новостей с здесь Ниже приведен код для анимации легкости и удобства просмотра при просмотре ссылок. Я изменяю размеры всей страницы с высоты 300 до 600. Я немного погуглил, и анимационная часть jquery анимирует свойство CSS элемента. Так что я работал оттуда. Думал, что у меня все работает, но у меня ничего не получалось, поэтому я подумал, что снова начну с нуля.

Может ли кто-нибудь объяснить это во время чтения? Например, и я просто догадываюсь, "анимируйте top css элемента страницы до -300px ... остальную часть строки я не понимаю.

Спасибо за любую помощь, преследование или указатели. 

$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                            $(this).css({'top':'310px'});

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;
                });
            });

1 Ответ

5 голосов
/ 22 января 2012

Я объясню; 

$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
        }
    );

другими словами, эта функция не делает ничего очень умного. Он оживляет и, в конце концов, все равно прыгает в другое место. В любом случае, надеюсь, я помог:)

...