如何在jQuery中写入CSS过渡
[英]How the write css transition in jquery
问题描述
I have written a css transition but I'm unable to write it in JQuery.Could anyone help me out. 
我已经写了一个CSS过渡，但是我无法在JQuery中写它。有人可以帮帮我吗。 Here is the html: 这是html：
<body class="icons">
<div class="icon-images">
<i class="fa fa-free-code-camp" aria- hidden="true"></i>
</div>
</body>
CSS: CSS：
.icons{
background-color:#DF3713;
height:100%;
weight:100%;
}
.icon-images{
background-color:#198493;
margin-top:5%;
margin-left:25%;
margin-right:25%;
//border-radius:;
height:100px;
width:100px;
-webkit-transform: rotate(0deg);
transition: background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out;
}
.icon-images:hover{
background-color:yellow;
transform:rotate(180deg);
}
Demo 演示版
5 个解决方案
解决方案1
1 2017-03-21 08:34:27
您想从代码触发悬停事件吗？
$(".icon-images").hover();
解决方案2
1 2017-03-21 08:42:56
Try the following: 请尝试以下操作：
$('.icon-images').hover(function() { $( this ).css('background-color', 'yellow'); $( this ).css('transform', 'rotate(180deg)'); $( this ).css('transition', 'background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out'); }, function() { $( this ).css('background-color', '#198493'); $( this ).css('transform', 'rotate(0deg)'); } );
.icons{ background-color:#DF3713; height:100%; weight:100%; } .icon-images{ background-color:#198493; margin-top:5%; margin-left:25%; margin-right:25%; //border-radius:; height:100px; width:100px; -webkit-transform: rotate(0deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="icon-images"> <i class="fa fa-free-code-camp" aria- hidden="true"></i> </div>
解决方案3
0 2017-03-21 08:44:26
I checked you link, the only problem on it was that your JS was not referencing the jQuery Library. 我检查了您的链接，唯一的问题是您的JS没有引用jQuery库。 To do that on codepen, click the "Gear" button next to "JS" and then in the overlay menu select "Jquery" from the "Quick add". 要在Codepen上执行此操作，请单击“ JS”旁边的“齿轮”按钮，然后在叠加菜单中从“快速添加”中选择“ Jquery”。
So basically, even though all the jQuery you were writing was correct, it was not running because the jQuery source was not referenced in the HTML document. 因此，基本上，即使您编写的所有jQuery都是正确的，它也没有运行，因为HTML文档中未引用jQuery源。
Here is a working solution to your problem. 这是您问题的有效解决方案。
[Fiddle Solution][1]
Explore jQuery functions to add a similar onfocusout event to rotate it back to its normal form. 探索jQuery函数以添加类似的onfocusout事件，以将其旋转回其正常形式。
解决方案4
0 2017-03-21 08:53:54
I hope this will work for you..!! 我希望这对你有用.. !!
$(document).ready(function(){ $('.icon-images').hover(function(){ $(this).css({'background-color':'yellow','transform':'rotate(130deg)'}); },function(){$(this).css({'background-color':'#198493','transform':'rotate(0)'})}); });
.icon-images{ background-color:#198493; margin-top:5%; margin-left:25%; margin-right:25%; height:100px; width:100px; -webkit-transform: rotate(0deg); transform:rotate(0deg); transition: background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="icon-images"> <i class="fa fa-free-code-camp" aria-hidden="true"></i> </div>
解决方案5
0 2017-03-21 09:03:49
To set transition using jQuery, Try this : 要使用jQuery设置过渡，请尝试以下操作：
$(document).ready(function(){
$(".icon-images").css({
transition : 'background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out'
});
});
Check out the fiddle : https://jsfiddle.net/NayanaDas/hur66rc6/ 查看小提琴： https : //jsfiddle.net/NayanaDas/hur66rc6/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.