Показать сообщение отдельно
  #2 (permalink)  
Старый 17.06.2014, 15:32
Аспирант
Отправить личное сообщение для cyber_2.0 Посмотреть профиль Найти все сообщения от cyber_2.0
 
Регистрация: 13.06.2014
Сообщений: 36

вот код
function animate ( opts ) {

  var start = new Date,
      properties = opts.properties,
      elem = opts.target,
      post, id;


    for( var prop in properties  ) {        
    	  post = getUnits( properties [prop]. post );
        elem.style [prop] =  properties [prop].from + post ;
    }


  (function anim() {

    var progress = (new Date - start) / opts.duration,
        from, to;
    
      if (progress > 1) progress = 1;
      
      for( var prop in properties  ) {
          
          from = properties [ prop ].from;
          to = properties [ prop ].to;
          post = getUnits( properties [prop]. post );

          elem.style [ prop ] =  ( ( to - from )  * progress + from ) + post;
      };

    if (progress == 1) {
      opts.complete && opts.complete();
      return;
    }
      
    id = setTimeout( anim, opts.delay || 20 ) ;

  }());


  function getUnits ( val ) {
  	if ( val === undefined ) 
  		return "px";

  	return val;
  };

  return function() {

    clearInterval ( id );
  }
    
}


вот пример вызова
properties = {
      top : { // свойство которое анимируем
        from: rect.top,
        to: top
      },
      left: {
        from: rect.left,
        to: left
      },
      width: {
        from: 0,
        to: width.val,
        post: width.units,
      },
      height: {
       from:  0,
       to: height.val,
       //post -  единицы измерения в которых анимируем, по умолчанию px
      },
      opacity: { 
        from: 0, 
        to: 1, 
        post: "%"  
      }
     };

 animate({
      target : win, // окно которое анимируем 
      delay: 15,
      duration: 2000, // время анимация в милесекундах 
      properties: properties, // объект со свойствами которые анимируем
      // complete: - тут можно передать callback
    });
Ответить с цитированием