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

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

1 个答案: