Question

我正在尝试使用 jQuery 在页面加载中淡化徽标。

您通常只需使用以下内容即可在页面加载时完成：

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

我想知道你是否可以操纵事件.fadeIn();或任何jQuery让图像以圆周运动淡出。我正在尝试进行单循环运动，而不是多次淡入淡出动作。我知道有一些方法可以使用顶部，左侧，右侧或下侧来操纵物体的线性方向。我还没有找到一种方法让它使用圆形方向淡入（或淡出）到网页。

用语言说：

首先，从0到90度角的图像将按顺序淡入。
接下来，从角度90到180的图像将按顺序淡入。
然后，从角度180到270的图像将按顺序淡入。
最后，您将能够看到从270到完整图像的图像。

如果你不能听到这些话，那么这是我想要完成的visual example，但它不像我想要的那样顺畅。

我该如何实现

插件

out

Answer 1

如果我理解你，你可以尝试这样的事情：

示例：http://jsfiddle.net/hju3dyot/

如果您希望它看起来更像滚动条

你可以简单地减少setTimeout函数like this

中的时间

HTML：

<div id="container">
    <div class="img" id="left-top"></div>
    <div class="img" id="right-top"></div>
    <div class="img" id="left-bottom"></div>
    <div class="img" id="right-bottom"></div>
</div>

CSS：

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

SCRIPT：

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

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

1 个答案: