要素の不透明度を変更し、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だけでも使用できます。この例では、あなたの答えは本当にこの問題を解決するために私を助け、

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