如何使用JQuery旋转图像淡入和淡出

Question

I believe this is pretty easy for you, as I have no idea how to integrate what I need into what I already have.

Please refer to this fiddle to see what I have: http://jsfiddle.net/pherrera/hnqfLvuk/1/

The code:

 $(document).ready(function () {

 var slowTwinkler = $('.slow');

 //play with the delay time to modify the twinkle order
 $('#star1').delay(5);

 function twinkleSlow() {
     slowTwinkler.animate({ opacity: '+=0.5'}, 1000);
     slowTwinkler.animate({ opacity: '=0.5' }, 3000);
     slowTwinkler.animate({ opacity: '-=0.8'}, 1000, twinkleSlow);
 }

 twinkleSlow();
});

As you can see it fadesIn and fadesOut as I want it, and I'd like to also rotate the image as it appears and disappears.

I found this fiddle where they use this function but I don't know hoe to add it to the code I have. Rotating code:

var rotation = function () {
$("#image").rotate({
    angle: 0,
    animateTo: 360,
    callback: rotation
});
}
rotation();

Any help will be much appreciated. Thanks

Answer 1

 $(document).ready(function () { var slowTwinkler = $('.slow'); //play with the delay time to modify the twinkle order $('#star1').delay(5); function twinkleSlow() { slowTwinkler.animate({ opacity: '+=0.5'}, 1000); slowTwinkler.animate({ opacity: '=0.5' }, 3000); slowTwinkler.animate({ opacity: '-=0.8'}, 1000, twinkleSlow); } function rotation () { slowTwinkler.animate({ rotation: '+=360'}, 1000); slowTwinkler.animate({ opacity: '=180' }, 3000); } rotation(); twinkleSlow(); }); 

I am not a super expert on JavaScript (so you may need to try some variants) but the above could maybe work?

Answer 2

Here you go:

$(document).ready(function () {

     var slowTwinkler = $('.slow');

     //play with the delay time to modify the twinkle order
     $('#star1').delay(5);

 function twinkleSlow() {         
     slowTwinkler.animate({ opacity: '+=0.5' , deg: '+=180' }, {
         duration: 1000,
         step: function(now) {
             slowTwinkler.css({
                 '-moz-transform': 'rotate('+now+'deg)',
                 '-webkit-transform': 'rotate('+now+'deg)',
                 '-o-transform': 'rotate('+now+'deg)',
                 '-ms-transform': 'rotate('+now+'deg)',
                 transform: 'rotate('+now+'deg)'
             });
         }
     });
     slowTwinkler.animate({ opacity: '=0.5' }, 3000);
     slowTwinkler.animate({ opacity: '-=0.8', deg: '+=180' }, {
         duration: 1000,
         step: function(now) {
             slowTwinkler.css({
                 '-moz-transform': 'rotate('+now+'deg)',
                 '-webkit-transform': 'rotate('+now+'deg)',
                 '-o-transform': 'rotate('+now+'deg)',
                 '-ms-transform': 'rotate('+now+'deg)',
                 transform: 'rotate('+now+'deg)'
             });
         },
         complete: twinkleSlow
     });
 }

     twinkleSlow();
 });

Link to jsFiddle here .