Как ограничить анимированный div его родительским div

У меня есть анимированный div, размещенный внутри div, я хочу, чтобы этот div мог перемещаться в пространстве своего родителя. Как мне это сделать?Как ограничить анимированный div его родительским div

Просто: я хочу, чтобы лягушка содержалась внутри frogger.

HTML

<div id="frogger">       <!-- Animate start --> 
    <button id="left">&laquo;</button> <button id="right">&raquo;</button> 
    <div id="frog"> 
    </div> 
</div>          <!-- Animate end -->

CSS

#frogger 
{ 
    width: 500px; 
    height: 500px; 
    border: solid; 
    margin: 0 auto; 
} 

#frog 
{ 
    position:relative; 
    background-color:#abc; 
    left:50px; 
    width:90px; 
    height:90px; 
    margin:5px; 
}

Javascript

$("#right").click(function(){ 
    if ($(':animated').length) { 
     return false; 
    } else { 
     $("#frog").animate({"left": "+=50px"}, {queue: false}, "slow"); 
    } 
}); 

$("#left").click(function(){ 
    if ($(':animated').length) { 
     return false; 
    } else { 
     $("#frog").animate({"left": "-=50px"}, {queue: false}, "slow"); 
    } 
});

источник

2012-05-31 Matt

@nnnnnn Я, возможно, придется сделать это, я просто подумал, что было бы более простое решение, например, что делает его родителей Див границы. – Matt

Извините, я удалил свой комментарий, чтобы опубликовать его как ответ, прежде чем увидел, что вы ответили на него. Я не думаю, что есть способ, чтобы ваш элемент лягушки был автоматически ограничен размерами его родителя, потому что относительное и абсолютное позиционирование CSS вполне преднамеренно позволяет перемещать ребенка по краям родителя. – nnnnnn

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

var $frog = $("#frog"); 

$("#right").click(function(){ 
    if (parseInt($frog.css('left')) >= 400 || $(':animated').length) { 
     return false; 
    } else { 
     $frog.animate({"left": "+=50px"}, {queue: false}, "slow"); 
    } 
}); 

$("#left").click(function(){ 

    if (parseInt($frog.css('left')) < 50 || $(':animated').length) { 
     return false; 
    } else { 
     $frog.animate({"left": "-=50px"}, {queue: false}, "slow"); 
    } 
});

Демо: http://jsfiddle.net/n3NgY/

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

источник

2012-05-31 04:46:42 nnnnnn

Работает так, как я хотел, спасибо. Единственное, что меня волнует, это то, что если я изменю размеры родительского div, мне кажется, что мне пришлось бы изменить этот js тоже, поэтому я надеялся, что есть решение, в котором вы можете просто ограничить ребенка его родителям. Но это тоже работает, спасибо еще раз. – Matt

Хорошо, как я сказал в своем последнем абзаце, я только жестко определил значения для демонстрационных целей. В вашей последней реализации вы вычислили числа, основанные на текущей ширине лягушки и родительской (или если ширина не изменится динамически, вы сохранили бы ширину в переменных на готовом документе, но в любом случае вы не будете жестко кодировать их). Хотя вам не нужна ширина ни одного элемента, чтобы проверить, нужно ли перемещаться влево, так как вы знаете, что левая граница равна 0. – nnnnnn

Прошу прощения, прокомментировал, прежде чем я понял, что вы прокомментировали>. < Ваше решение действительно работает красиво, и yeh Мне не нужно жестко указывать какие-либо изменения, если я правильно это кодирую, извините, я новичок. Еще раз спасибо. – Matt

Да, вам нужно будет сделать небольшое простое обнаружение конфликтов, но, к сожалению, CSS не позволит вам это сделать. Но вы можете сделать это динамически так:

$("#right").click(function(){ 
    var frog_right = $("#frog").offset().left + $("#frog").width(); 
    var frogger_right = $("#frogger").offset().left + $("#frogger").width(); 

    if ($(':animated').length || frog_right >= frogger_right) { 
     return false; 
    } else { 
     $("#frog").animate({"left": "+=50px"}, {queue: false}, "slow"); 
    } 
}); 

$("#left").click(function(){ 
    var frog_left = $("#frog").offset().left; 
    var frogger_left = $("#frogger").offset().left; 

    if ($(':animated').length || frog_left <= frogger_left) { 
     return false; 
    } else { 
     $("#frog").animate({"left": "-=50px"}, {queue: false}, "slow"); 
    } 
});

источник

2012-05-31 04:48:02

Как ограничить анимированный div его родительским div

ответ

Смежные вопросы