Question

我相信这对你来说很容易，因为我不知道如何将我需要的东西整合到我已经拥有的东西中。

请参考这个小提琴，看看我有什么：http://jsfiddle.net/pherrera/hnqfLvuk/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);
 }

 twinkleSlow();
});

正如你所看到的那样，它会在我想要的时候淡出和淡出，我想在图像显示时旋转并消失。

我发现这个fiddle他们使用这个函数，但我不知道把它添加到我的代码中。旋转代码：

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

任何帮助将不胜感激。感谢

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

我不是JavaScript的超级专家（所以你可能需要尝试一些变体）但上面的内容可能有用吗？

Answer 2

你走了：

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

链接到jsFiddle here。

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

2 个答案: