JQuery - динамически установить высоту или ширину при анимации

Question

JQuery - динамически установить высоту или ширину при анимации

0

Мне было любопытно, как динамически устанавливать высоту или ширину на основе анимации div.

Jquery

$(document).ready(function() {
  var div1dimensions = 50 / 180 +'px';  
  $("#div1").animate({
    width: divdimensions,
    height: "100px",
    opacity: 1,
  }, 1500 );
});

Могу ли я не просто создать переменную и разместить ее там, где ширина или высота? Или это только для значений CSS, таких как 100px?

Спасибо.

user2004710 13 нояб. 2013, в 19:40

Источник

0

Да, вы можете обратиться по этой ссылке: stackoverflow.com/questions/15674068/…
Ankit Tyagi 13 нояб. 2013, в 17:52

Теги:

javascript

jquery

jquery-animate

1 ответ

Ещё вопросы

Да, вы можете обратиться по этой ссылке: stackoverflow.com/questions/15674068/…

PlantTheIdea · Accepted Answer · 2013-11-13T15-45-00.000Z

Важно то, что при использовании объектной формы метода .css() любые числовые значения, размещенные там, по своей сути считаются значениями пикселей:

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: 100,
    opacity: 1,
  }, 1500 );
});

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

$(document).ready(function() {
  var div1dimensions = (50 / 180),
      divHeight = div1dimensions * 1.5;  

  $("#div1").animate({
    width: divdimensions,
    height: divHeight,
    opacity: 1,
  }, 1500 );
});

Или любой другой расчет переменных, который вы хотите, это просто пример. Кроме того, в качестве jQuery 1.4 вы можете передать функцию для этого вычисления. Пример, используемый в документации jQuery.css(), измененный, чтобы отобразить ваш пример:

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: function(i){
        return i * 50;
    },
    opacity: 1,
  }, 1500 );
});

Это может быть довольно сложным и очень полезно в очень специфических сценариях, но пригодится при необходимости.

Спасибо. Одно замечание, вы можете изменить ширину: от divimensions до div1dimensions. Кроме того, если я хотел написать 50, деленное на 100, а затем умножить это значение на 180, правильно ли писать (50/100 * 180)? еще раз спасибо.
технически да, однако я ненавижу неявный код (который этот код неявно полагается на порядок операций). лично я написал бы это как ((50 / 100) * 180) . это упаковано надлежащим образом, и ясно обозначает порядок выполнения математически.
так идентично базовому порядку операций. еще раз спасибо