jquery - jquery 淡入和淡出无法正常工作

Question

这是淡出文本和淡入新文本的脚本

但是一个文本应该完全淡出，然后新文本应该慢慢淡入，我不知道我的代码有什么问题。

    var textArray = ["murali","prashanth","nutal","candy"];

    var getRand = (function() {
    var nums = [0,1,2,3];
    var current = [];
    function rand(n) {
        return (Math.random() * n)|0;
    }
    return function() {
      if (!current.length) current = nums.slice();
      return current.splice(rand(current.length), 1);
    }
}());

setInterval(function(){callme();},5000);

function callme(){
    var x = getRand();
    $("#mydiv").html(textArray[x])
    $("#mydiv").fadeOut(4000).fadeIn(2000);
}

在这里检查 JSFIDDLE ..

Answer 1

这将取决于您指定的时间

 $("#mydiv").fadeOut(4000).fadeIn(4000);

fadeIn()在两者中指定相同的时间fadeOut()

关联

Answer 2

试试这个小提琴

$("#mydiv").fadeIn();
$("#mydiv").fadeOut(3000);

我改变了淡出和淡入时间

Answer 3

在此处检查 JSFiddle。

修复如下：

1. 将 SetInterval 更改为动画时间线的总和，使得interval = fadein + fadeout(6000 = 4000+2000)
2. 改变动画和html内容设置的顺序，即
   1. 设置 html（我们展示之前设置的新内容）
   2. 设置淡入（出现新内容）
   3. 设置淡出（发回淡出的内容）

使用与您相同的淡入淡出时间检查工作代码，将内部设置更改为 6000 而不是 5000，并更改动画顺序。

工作代码：

var textArray = ["murali","prashanth","nutal","candy"];

var getRand = (function() {
    var nums = [0,1,2,3];
    var current = [];
    function rand(n) {
        return (Math.random() * n)|0;
    }
    return function() {
      if (!current.length) current = nums.slice();
      return current.splice(rand(current.length), 1);
    }
}());

setInterval(function(){callme();},6000);

function callme(){
    var x = getRand();
    $("#mydiv").html(textArray[x])
    $("#mydiv").fadeIn(2000)
    $("#mydiv").fadeOut(4000);
}