Как Jquery анимировать CSS слева значение до ширины элемента?

Question

Мне нужно переместить абсолютный div относительно его родителя, используя функцию анимации JQuery. Как ограничить литерал объекта CSS слева + = -600px, чтобы левое позиционирование остановилось, когда оно достигло конца ширины? Другими словами, я хочу ограничить левое позиционирование элемента таким образом, чтобы он не перемещался со страницы и не отображался. Спасибо за помощь

Answer 1

Ну, вы не указали ни одного кода, поэтому я предполагаю, что вы неправильно поняли, как работает функция анимации jQuery. На самом деле функция анимации jQuery выполняет именно то, что вы хотите. Он увеличит атрибуты элемента, который вы хотите, чтобы он не больше, чем вы хотите. То есть, он не будет перемещать его со страницы и не смотреть в глаза, если вы этого не хотите. Here прочитайте, как это работает.

Answer 2

$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]); 

Или, если вы имели в виду элементов собственную ширину:

$(this).animate({'left': '-'+$(this).width()}, [time in ms]); 

Answer 3

Вы можете использовать JQuery animate «s step -функции для проверки на каждом шаге, был ли элемент достиг края страницы и следует остановить. HERE - это скрипка, которая демонстрирует использование функции шага, чтобы остановить анимацию, когда достигнут предел.

...animate({left: '+=-600px'}, 
    { 
    ... , 
    step: function(now, fx) { 
     if (fx.now <= 0) { // If the current animation value is less than zero 
     $(fx.elem).stop(); 
     $(fx.elem).style('left', '0'); 
     } 
    } 
    ... 
    } 
); 

Функция шага дает вам хороший способ управления анимацией шаг за шагом, если необходимо. Читайте here для получения дополнительной информации.

Answer 4

Чтобы держать его выстроились в родителя, вам необходимо вычесть ширину ребенка от родительской ширины, например, так:

$(document).ready(function(){ 
var childWidth = $('#child').width(); 
var parWidth = $('#child').parents('#parent').width(); 
var offSet = parWidth - childWidth; 

$('#child').animate({ 
    left: '+=' + offSet 
}, 1000); 

}); 

Пример HTML:

<div id="parent"> 
    <div id="child"> 
     I've been a bad child. 
    </div>  
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 
#parent { 
    width: 600px; 
    height: 200px; 
    background: green; 
    position: relative; 
} 

#child { 
    position: absolute; 
    background: red; 
    width: 100px; 
    height: 200px;   
} 

See this JSFiddle для демонстрации.