更改元素的不透明度并通过 jquery 动画旋转它

Question

我需要旋转 $('.closebtn') 元素，同时更改其不透明度。 css:

.closebtn{
    position: absolute;
    right: 15px;
    top: 5px;
    font-size: 35px;
    text-align: center;
    cursor: pointer;
    border-spacing: 0px;
    opacity: 0;}

我正在尝试使用 jquery 动画：

$('.closebtn').animate(
                {  borderSpacing: 90 }, {
                step: function(now,fx) {
                  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
                  $(this).css('-moz-transform','rotate('+now+'deg)');
                  $(this).css('transform','rotate('+now+'deg)');
                },
                duration: 200,
            });

关于如何更改动画事件处理程序中的不透明度有什么想法吗？

Answer 1

您也可以只使用 CSS3 来完成。此示例仅在按钮 1 上使用 CSS3，在按钮 2 上使用 jQuery。

$(document).ready(function(){
  var $elem = $('.closebtn2');
  $({ deg: 0 }).animate({ deg: 359 }, {
    duration: 5000,
    step: function (now) {
      var opacity = (1 * now / 359);
       $elem.css({
         transform: 'rotate(' + now + 'deg)',
         opacity: opacity
       });
    }
  });
});

.closebtn{
    font-size: 35px;
    text-align: center;
    cursor: pointer;
    border-spacing: 0px;
    opacity: 1;
}

.animate {
  -webkit-animation: animation-name 4s 1s; /* Safari 4+ */
  -moz-animation:    animation-name 4s 1s; /* Fx 5+ */
  -o-animation:      animation-name 4s 1s; /* Opera 12+ */
  animation:         animation-name 4s 1s;
}

@-webkit-keyframes animation-name {
  0%   { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(360deg); }
}
@-moz-keyframes animation-name {
  0%   { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(360deg); }
}
@-o-keyframes animation-name {
  0%   { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(360deg); }
}
@keyframes animation-name {
  0%   { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="closebtn animate">Test</button><br /><br />

<button class="closebtn closebtn2">Test</button>

更改元素的不透明度并通过 jquery 动画旋转它

Change opacity of an element and rotate it via jquery animation

jquery

jquery-animate