Javascript 是否可以使用jQuery进行径向淡入？

我正在尝试使用jQuery使徽标在页面加载时淡入

通常，您只需使用以下工具即可在页面加载时完成此操作：

$(document).ready(function() {
    $("div").fadeIn(800);
});

我想知道您是否可以操纵事件

.fadeIn（）或任何jQuery以使图像在圆周运动中淡入淡出。我尝试的是一个单圆周运动，而不是多个淡入运动。我知道在使用top、left、right或down时，有很多方法可以操纵对象的线性方向。我还没有找到一种方法，使它淡入（或淡出）的网页使用一个圆形的方向


简言之：

首先，从0到90度角度的图像将依次淡入
接下来，从角度90到180的图像将依次淡入
然后，从角度180到270的图像将依次淡入
最后，您将能够看到从270到完整图像的图像
如果你听不懂这些话，下面是我试图完成的一个例子，但它并不像我想要的那样顺利


到目前为止，我已经试着让它从顶部逐渐下降，但可能会旋转它，但这不是我想要的。我对如何修复jQuery中的问题不是很了解，但我想问的是如何实现这一点，而不是我的代码


如果不能使用jQuery实现，那么可以使用CSS或某种jQuery插件来实现吗？如果可能的话，有没有办法以同样的方式淡出div呢

例如：

如果你想让它看起来更像一个滚动条

您可以在setTimeout函数中简单地减少时间

HTML:

脚本：

var arr = ["#left-top", "#right-top", "#right-bottom", "#left-bottom"];
var counter = 0;



$(document).ready(function () {

  function makeItVisible() {
     if (counter < arr.length) {
         $(".img").removeClass("visible");
         $(arr[counter++]).addClass("visible");
     } else {
         counter = 0;
         return;
   }
};

   setInterval(makeItVisible, 2000);
});

var arr=[“左上”、“右上”、“右下”、“左下”]；
var计数器=0；
$（文档）.ready（函数（）{
函数makeItVisible（）{
if（计数器<阵列长度）{
$（“.img”）.removeClass（“可见”）；
$（arr[counter++]）.addClass（“可见”）；
}否则{
计数器=0；
返回；
}
};
设置间隔（使其可见，2000年）；
});
这可以通过CSS3转换本身来实现。但在第一次展示你已经尝试过的：）请发布一些你已经尝试过的代码far@mohamedrias我的代码是CSS和jQuery的混合，根本不起作用，因为我真的不知道从哪里开始。我只是问我如何做到这一点，这样我就可以自己将其植入我的代码中。你可以尝试设置从背景色到透明色的径向渐变动画。@Bram这可能行得通，但我正在尝试使用图像。我的目标是让对象淡入，以便所有对象都可以一次看到。我打算进行径向淡入，如我链接的示例所示。这看起来更像是一个幻灯片，图片逐渐消失。我会相应地调整问题。@ShaunLoftin，我的观点是你可以将你的图像/徽标分成4块，然后将它们分别放入单独的div中（我在上面的示例中使用了图像），然后从左上角开始更改它们的不透明度。我在JSFIDLE中做了另一个例子（我用另一个链接更新了我的答案），使它看起来像滚动条，虽然它在线性方向上逐渐消失，但这是可行的。我试着问你是否可以在一个div中以放射状淡入，或者以圆周运动淡入。喜欢你的方法，但是编辑了一些看起来更符合逻辑的东西（背景位置等等）。请在您的帖子中随意使用它：好工作/好主意，它在网页设计的日常使用中肯定很有用。
#container {
 height: 900px;
 width: 450px;
 margin: 2% auto;
 border: 1px solid #5970bb;
 border-radius: 3px;
 box-shadow: 10px 10px 20px rgba(35, 35, 35, 0.50);
 padding: 5px;
}

.img {
 background: url(http://s14.postimg.org/cdkclcbep/cat.jpg) no-repeat;
 height: 250px;
 width: 200px;
 display: inline-block;
 opacity: 0;
 -moz-transition: opacity 1s;
 -o-transition: opacity 1s;
 -webkit-transition: opacity 1s;
 transition: opacity 1s;
}

#left-top {
 background-position: -34px 0;
}

#right-top {
 background-position: -199px -10px;
}


#left-bottom {
 background-position: -25px -210px;
}

#right-bottom {
 background-position: -208px -207px;
}



.visible {
   opacity: 1;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

var arr = ["#left-top", "#right-top", "#right-bottom", "#left-bottom"];
var counter = 0;



$(document).ready(function () {

  function makeItVisible() {
     if (counter < arr.length) {
         $(".img").removeClass("visible");
         $(arr[counter++]).addClass("visible");
     } else {
         counter = 0;
         return;
   }
};

   setInterval(makeItVisible, 2000);
});