Question

我正在进行一项任务，似乎一切正常，但在第二步，第5步中，在1.5秒内将边界半径增加到30px 这种变化应该将形状转换为圆形，但正如您所看到的那样，它远离圆形。我注意到将半径改为150px~给你一个圆圈。但我的教授说30px，任何想法，如果这是我的错误或他的？

谢谢！

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project 19</title>
  <style>
    html {margin:2em; font-family:Helvetica, Arial, sans-serif;}
    h1 {margin:0;}
    h2 {color:#369;}
    hr {margin:2em 0;}
    .box {width:100px; height:100px; padding:2em; border:1px solid black; background-color:#069;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>

  <h2>Task One</h2>
  <p>Add the jQuery to accomplish the following effects in tandem when the box is clicked:</p>
  <ol>
    <li>Increase the width and height to 200px each</li>
    <li>Increase the font size to 44px</li>
    <li>Increase the border width to 10px</li>
    <li>Animation should take a total of 1.5 seconds</li>
  </ol>
  <div class="box box1" id="b1">I am a box.</div>

  <script>
  $('#b1').on('click', function(){
    $(this).animate({
      width: '200px',
      height: '200px',
      fontSize: "44px",
      'border-width':'10px'
    }, 1500);
  });
  </script>

  <hr>

  <h2>Task Two</h2>
  <p>Add the jQuery to accomplish the following effects **in sequence** when the box is clicked:</p>
  <ol>
    <li>Increase the width to 120px over half a second</li>
    <li>Increase the height to 120px over half a second</li>
    <li>Wait for 1 second</li>
    <li>Increase the font size to 44px over 1 second</li>
    <li>Increase the border radius to 30px over 1.5 seconds</li>
    <li>When animation #4 is <b>complete</b>, change the text to "I am a circle."</li>
  </ol>
  <div class="box box2" id="b2">I am a box.</div>

  <script>
  $('#b2').on('click', function(){
    $(this)
      .animate({width: '120px'}, 500)
      .animate({height: '120px'}, 500)
      .delay(1000)
      .animate({fontSize:'44px'}, 1000, function(){ $('#b2').text('I am a circle.')})
      .animate({borderRadius: '30px'}, 1500)
  ;
  });
  </script>

</body>
</html>

Answer 1

使用border-radius和CSS3 Transitions

$('button').click(function () {
  $('#target').addClass('circle');
});

#target {
  background-color: red;
  height: 100px;width:100px;
  border-radius: 0%;
  transition: border-radius 0.8s ease
}

.circle {
  border-radius: 50% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target"></div>

<button>Transform!</button>

当使用CSS3 Transitions可以实现像这样的任务时，我倾向于避免使用jQuery。大多数浏览器都支持它们，但如果您希望使用jQuery .animate()，则可以使用其他示例

您的教授可能会说30px，但这取决于元素的 width / height 。每次都使用50%制作一个圆圈。

$('button').click(function () {
  $('#target').animate({
    "border-radius": "50%"
  }, 500);
});

#target {
  background-color: red;
  width: 100px; height: 100px;
  border-radius: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target"></div>
<button>Transform</button>

使用jQuery Animate将Square转换为Circle

1 个答案: