Блог

Главная - Вопросы по программированию - Уменьшить родительский элемент, чтобы он соответствовал дочерним элементам во время анимации jQuery по ширине

Уменьшить родительский элемент, чтобы он соответствовал дочерним элементам во время анимации jQuery по ширине

#jquery #html #css

#jquery #HTML #css

Вопрос:

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

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

Как я могу сохранить соотношение сторон родительского элемента во время анимации? (возможно, что-то вроде прослушивателя изменения размера окна?) Пожалуйста, обратите внимание, что это сокращение является примером анимации. У меня сложная анимация в реальном времени, и поэтому я ищу общее решение в каждый момент, а не для этого образца целевой ширины 200 пикселей.

 $(document).ready(function(){
	var width=$("#wrapper").width();
	$("#wrapper").height(width*0.33);
  
  
  $("#shrink").click(function(){
    $("#wrapper").animate({"width":"200px"},3000)
  })
})  
 #wrapper{
  position:relative;
  top:0;
  left:0;
  width:100%;
  border:1px solid #444444;
}

.child{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  }

#shrink{cursor:pointer}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="shrink">Click here to shrink</a>
<br><br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

Ответ №1:

Вы можете использовать переменную для хранения коэффициента масштабирования width (т.е. newWidth / width ), Затем умножить height на этот коэффициент, чтобы получить новый height .

 $(document).ready(function() {
  var width = $("#wrapper").width();
  $("#wrapper").height(width * 0.33);

  var newWidth = 200;
  var scalingFactor = newWidth / width;
  var height = $("#wrapper").height();

  $("#shrink").click(function() {
    $("#wrapper").animate({
      "width": newWidth   "px",
      "height" : height * scalingFactor   "px"
    }, 3000)
  })
})  
 #wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #444444;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#shrink {
  cursor: pointer
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="shrink">Click here to shrink</a>
<br>
<br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

Комментарии:

1. Спасибо. Ваш ответ работает только для точной целевой ширины, где я понятия не имею о конечной ширине. Эта кнопка сжатия является примером, у меня сложная анимация, не имеющая представления о ширине во время анимации. Я поддержал ваш ответ, но мне нужно больше ждать общего решения.

2. Добро пожаловать! Я просто попытался решить проблему с фрагментом в вашем коде. если вы понятия не имеете о конечной ширине, то это совсем другая история. Можете ли вы опубликовать свой полный код ?! или его уменьшенная версия ?!

3. Еще раз спасибо. Я сожалею, что вопрос недостаточно ясен. Я нашел общее решение и опубликовал его как новый ответ.

Ответ №2:

ОК. Я нашел общее решение, используя пошаговую функцию jQuery. step — это опция в jQuery animate, которая запускается на каждом шаге анимации. Итак, я могу написать функцию изменения размера и вызывать ее на каждом шаге.

 $(document).ready(function(){
	resizeWrapper();
  
  
  $("#shrink").click(function(){
    $("#wrapper").animate({"width":"200px"},{duration:3000,step:function(){resizeWrapper()}})
  })
})

function resizeWrapper(){
	var width=$("#wrapper").width();
	$("#wrapper").height(width*0.33);

}  
 #wrapper{
  position:relative;
  top:0;
  left:0;
  width:100%;
  border:1px solid #444444;
}

.child{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  }

#shrink{cursor:pointer}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="shrink">Click here to shrink</a>
<br><br>
<div id="wrapper">
  <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

Я также нашел обнаружение изменения размера, но у меня это не сработало.