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

check JSFIDDLE HERE..

Answer 1

这取决于您指定的时间

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

在fadeIn()和fadeOut()

中指定相同的时间

LINK

Answer 2

试试这个FIDDLE

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

我改变了淡出时间和淡出时间

Answer 3

Check JSFiddle here.

修复如下：

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

使用与您相同的淡入淡出时间检查working code，将内部设置更改为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);
}

jquery fadein和fadeout工作不正常

3 个答案: