javascript - 动画后定义文本的高度和宽度

Question

下面的代码在加载时为文本“hello Your World”设置动画。一切似乎都很好，但是当它返回到左侧面板时，我想要 “缩小到左侧面板后，我无法定义高度、宽度和字体大小，就像在 javascript 中一样”

jsfiddle

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div>

JavaScript:

 window.onload = function() {

$(function() {
  FixMargins();

var phWidth = $(".placeholder").width();
var height = $(".container").height();
containerHeight = $(".theText").height();
var newTopMargin = (height - containerHeight) / 2;

$(".theText").animate({
  transform: 2
}, {
  step: function(now, fx) {
    var newscale = 1 + +now;
   $(this).css({
     'transform': "scale(" + newscale + "," + newscale + ")",
               "opacity":-1 + now
               });
    $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
    $(".placeholder").css({
      "width": phWidth - phWidth * now/2
    });
    FixMargins();
  },
  duration: 3000
}).promise().done(function() {
  $(this).delay(3000);
  var textTop = $(".theText").css("margin-top").split('p')[0];
  var textLeft = $(".theText").css("margin-left").split('p')[0];
  $(this).animate({
    transform: 2
  }, {
    step: function(now, fx) {
      console.log(textLeft - textLeft * now);
      var newscale = 3 - +now;
      $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

      $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
      $(".theText").css("marginTop", textTop - textTop / 2 * now);
    },
    duration: 3000


    }).promise().done(function() {

        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });



});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

}

};

CSS:

.container {
  width: 500px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {
  width: 200px;
  display: inline-block;
}

Answer 1

您需要在 jQuery 逻辑中控制这些属性。在您的情况下，您缺少要在第二个动画上设置动画的属性(“top”、“left”和“font-size”):

JS:

$(function () {
    FixMargins();

    var phWidth = $(".placeholder").width();
    var height = $(".container").height();
    var containerHeight = $(".theText").height();
    var newTopMargin = (height - containerHeight) / 2;

    $(".theText").animate({
        transform: 2
    }, {
        step: function (now, fx) {
            var newscale = 1 + now;
            $(this).css({
                'transform': "scale(" + newscale + "," + newscale + ")",
                    "opacity": -1 + now
            });
            $(this).css("margin-top", -150 + (newTopMargin + 150) / 2 * now);
            $(".placeholder").css({
                "width": phWidth - phWidth * now / 2
            });
            FixMargins();
        },
        duration: 3000
    }).promise().done(function () {
        $(this).delay(3000);
        var textTop = $(".theText").css("margin-top").split('p')[0];
        var textLeft = $(".theText").css("margin-left").split('p')[0];

        $(this).animate({
            "top": "10%",
            "left": "3%",
            fontSize : '30px',

            transform: 2
        }, {
            step: function (now, fx) {
                var newscale = 3 - +now;
                $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

                $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
                $(".theText").css("marginTop", textTop - textTop / 2 * now);
            },
            duration: 3000
        }).promise().done(function () {

            $(this).find('span').css({
                "position": "absolute"
            }).animate({
                "width": 0,
                "opacity": 0
            }, function() {
                $(this).parent().animate({
                    "letter-spacing": "0.75em"
                });
            });
        });
    });



});

function FixMargins() {

    width = $(".container").width();
    containerWidth = $(".theText").width();
    leftMargin = (width - containerWidth) / 2;
    $(".theText").css("marginLeft", leftMargin);

}