jQuery: анимировать поля для авто? - PullRequest
Новая
       18

jQuery: анимировать поля для авто?

8 голосов
/ 22 декабря 2010

Я пытаюсь анимировать изображение, чтобы оно центрировалось.Вот код, который я хотел бы использовать: 

$('#myImage').animate({'margin-right': 'auto'});

Но когда я это делаю, он игнорируется и не меняет поля. Есть ли способ анимировать поля для автоматического или иным образом центрировать изображение?

Спасибо!

Ответы [ 3 ]

11 голосов
/ 22 декабря 2010

Так как 'auto' не является числом, jQuery не может его анимировать.

Если вы можете удалить изображение из потока документа, вы можете установить абсолютное или фиксированное положение и попробовать: 

$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });
2 голосов
/ 22 декабря 2010

Вы не можете анимировать свойство auto. Чтобы правильно анимировать элемент к центру экрана, вам нужно расположить его absolutely (или другой), а затем рассчитать размер экрана, размер элемента и положение прокрутки. Вот еще один SO-ответ на что-то подобное. Вот Скрипка 

jQuery.fn.center = function () {
    this.css("position","absolute");
    var top = ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px",
        left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
    this.animate({top: top, left: left});
    return this;
}

В качестве альтернативы, если вы хотите только горизонтальное выравнивание, вы можете удалить верх из функции анимации. И если вы действительно хотите проявить творческий подход, вы можете удалить position:absolute и изменить положение margin:auto после анимации в случае изменения размера экрана. Смотри еще одну скрипку . 

jQuery.fn.center = function () {
    this.css("position","absolute");
    var left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
    this.animate({left: left}, function(){
        $(this).css({position: 'static', margin: '0 auto'});
    });
    return this;
}
$('#selector').center();
0 голосов
/ 23 февраля 2017

Расширяя ответ Джозии Рудделла. Если вы, ребята, нуждаетесь в том, чтобы ваше изображение сохраняло свою направленность в документе, используйте эту измененную версию ответа Джозии. Мое изображение изначально было расположено на margin: 0 -1000px, и скользило к вычисленному полю слева и справа. Сохраняя свой поток в дом все время 

jQuery.fn.center = function () {
  var margin = ( $(window).width() - this.width() ) / 2;
  this.animate({
    marginLeft: margin, 
    marginRight: margin
  }, function(){
    $(this).css({margin: '0 auto'});
  });
  return this;
}
...