我尝试了所有方法,但我不知道为什么这些动画不起作用。谁能帮帮我?
.link {
float:right;
clear:both;
padding:30px;
font-size:20px;
background-color: yellow;
color: #333;
font-family: Dosis;
font-weight: 700;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
text-align:right;
}
.link:hover {
width:100%;
transition: width 2s;
}
<div class="link">Something</div>
<div class="link">about</div>
<div class="link">you</div>
<div class="link">makes</div>
<div class="link">me</div>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
最佳答案
也许它过于复杂,但它似乎有效:)
$(document).ready(function() {
$('.link').each(function() {
var value = $(this).width();
$(this).css({"width":value});
$(this).hover(function(){
$(this).css({"width":"100%"});
},function(){
$(this).css({"width":value});
})
})
});
.link {
width: auto;
float:right;
clear:both;
padding:30px;
font-size:20px;
background-color: yellow;
color: #333;
font-family: Dosis;
font-weight: 700;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
text-align:right;
}
.link:hover {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Something</div>
<div class="link">about</div>
<div class="link">you</div>
<div class="link">makes</div>
<div class="link">me</div>
关于CSS宽度动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44613800/