jQuery анимирует ширину от центрированных x координат элемента

#javascript #jquery #css #jquery-animate

#javascript #jquery #css #jquery-анимировать

Вопрос:

Возможно ли animate() увеличить ширину элемента, создавая плавную анимацию по центру?

Я имею в виду анимацию, делающую элемент фиксированным на самом себе с центром в x координатах?

если я сделаю :

 <a class="animate">hey</a>
$('.animate').animate({'width':' =1%'},500);

это работает, но элемент анимируется справа, а не от центра самого себя

Ответ №1:

Да, вам также придется переместить элемент.

 <a class="animate" style="display:block; width:300px; border:1px solid #000; position:fixed; top:50px; left:50px;">hey</a>
jQuery(".animate").animate({'width':'0px', 'left':'200px'});

http://jsfiddle.net/7Ysbg/

Новая информация

Итак, вы имеете в виду что-то вроде этого: http://jsfiddle.net/7Ysbg/2 /

 jQuery(".animate").click( function(){
    var w = jQuery(".animate").width();
    var new_w = jQuery(".animate").width()*1.5;
    var left = jQuery(".animate").offset().left - ((new_w - w)/2);
    jQuery(".animate").animate({'width':new_w 'px', 'left':left 'px'}, 'fast');
});

1. извините, мне нужно с точностью до наоборот… вы анимируете от n до 0, мне нужно от n до 1 вправо 1 влево

2. Изменен приведенный выше код. Вы можете изменить значение 1.5 на 1.1 или все, что вам нужно.

Ответ №2:

Просто анимируйте не только ширину, но и положение элемента. Например, вы можете анимировать left свойство. В этом случае ваш элемент должен иметь position значение relative или absolute .

 var width = $('.animate').width();
$('.animate').animate({
    width: width*1.01,
    left: width*0.005
},500);

1. нужно ли мне устанавливать позицию: относительную или абсолютную? причина, как принято, не работает для меня

2. Извините за редактирование @bjornd. Я не хотел ставить это на ваше, но это не позволило бы мне отменить это.