Question

它不会缓慢过渡到没有边界半径的div，而是会回弹。

我尝试过更改border radius属性，但是它做了同样的事情

$(document).ready(function() {
$("#thesun").mouseenter(function() {
$("#thesun").animate({
  "border-radius": "50%",
}, 500);
});
$("#thesun").mouseleave(function() {
$("#thesun").animate({
  "border-radius": "0%",
}, 500);
});
});

Codepen

Answer 1

您只能使用css和#thesun:hover上的transition来做到这一点

.planets {
  height: 200px;
  width: 200px;
  margin: 5px;
  text-align: center;
  color: white;
  text-align: center;
}

#thesun {
  height: 400px;
  width: 412px;
  background: gold;
  position: relative;
  left: 260px;
  text-align: center;
   transition: border-radius 0.5s; /* add this */
}
#thesun:hover{ /* and add this */
 border-radius:50%;
}
#theearth {
  background: #008080;
  height: 250px;
  width: 250px;
  position: relative;
  left: 340px;
  text-align: center;
}
#solardiv {
  width: 100%;
  height: 100px;
}
.labels {
  font-size: 30px;
  color: white;
  text-shadow:
	-1px -1px 0 #000,
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
  font-weight: bold;
  font-family: arial;
  display: inline-block;
}
body {
  background-image: url("https://hdqwalls.com/wallpapers/nebula-space-scenery-4k-q4.jpg");
  
}

<div id="solardiv">
  <div id="thesun"><p class="labels">SUN</p></div>
</div>

jQuery mouseleave函数会返回而不是过渡吗？

1 个答案: