如何在jQuery中写入CSS过渡

Question

我已经写了一个CSS过渡，但是我无法在JQuery中写它。有人可以帮帮我吗。 这是html：

<body class="icons">
  <div class="icon-images">
    <i class="fa fa-free-code-camp" aria-     hidden="true"></i>
   </div>
</body>

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);
}

演示版

Answer 1

您想从代码触发悬停事件吗？

$(".icon-images").hover();

Answer 2

请尝试以下操作：

 $('.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>

Answer 3

我检查了您的链接，唯一的问题是您的JS没有引用jQuery库。 要在Codepen上执行此操作，请单击“ JS”旁边的“齿轮”按钮，然后在叠加菜单中从“快速添加”中选择“ Jquery”。

因此，基本上，即使您编写的所有jQuery都是正确的，它也没有运行，因为HTML文档中未引用jQuery源。

这是您问题的有效解决方案。

[Fiddle Solution][1]

探索jQuery函数以添加类似的onfocusout事件，以将其旋转回其正常形式。

Answer 4

我希望这对你有用.. !!

 $(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>

Answer 5

要使用jQuery设置过渡，请尝试以下操作：

$(document).ready(function(){
    $(".icon-images").css({
        transition : 'background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out'

    });
});

查看小提琴： https : //jsfiddle.net/NayanaDas/hur66rc6/

如何在jQuery中写入CSS过渡

问题描述

演示版

5 个解决方案

解决方案1
1 2017-03-21 08:34:27

解决方案2
1 2017-03-21 08:42:56

解决方案3
0 2017-03-21 08:44:26

解决方案4
0 2017-03-21 08:53:54

解决方案5
0 2017-03-21 09:03:49

如何在jQuery中写入CSS过渡

问题描述

演示版

5 个解决方案

解决方案1 1 2017-03-21 08:34:27

解决方案2 1 2017-03-21 08:42:56

解决方案3 0 2017-03-21 08:44:26

解决方案4 0 2017-03-21 08:53:54

解决方案5 0 2017-03-21 09:03:49

解决方案1
1 2017-03-21 08:34:27

解决方案2
1 2017-03-21 08:42:56

解决方案3
0 2017-03-21 08:44:26

解决方案4
0 2017-03-21 08:53:54

解决方案5
0 2017-03-21 09:03:49