Jquery 如何将显示/隐藏更改为淡入/淡出？

代码是从中编辑的

我想做一个1000毫秒的fadein/out，而不是突然的show/hide，但不知道怎么做

以下是我到目前为止的情况：

HTML:

javascript:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

试试这个

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).fadeOut('slow');
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().fadeIn('slow').prev().fadeOut('slow');
        else {
            $(".divs div:visible").fadeOut('slow');
            $(".divs div:first").fadeIn('slow');
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().fadeIn('slow').next().fadeOut('slow');
        else {
            $(".divs div:visible").fadeOut('slow');
            $(".divs div:last").fadeIn('slow');
        }
        return false;
    });
});

---

必须将“隐藏”替换为“淡出”，将“显示”替换为“淡出”。 此外，div在CSS中必须相互重叠

jQuery：

$(document).ready(function(){
$(".divs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$("#next").click(function(){
    if ($(".divs div:visible").next().length != 0)
        $(".divs div:visible").next().fadeIn(1000).prev().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:first").fadeIn(1000);
    }
    return false;
});

$("#prev").click(function(){
    if ($(".divs div:visible").prev().length != 0)
        $(".divs div:visible").prev().fadeIn(1000).next().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:last").fadeIn(1000);
    }
    return false;
});
});

CSS:

---

完整代码：

所以我假设您想要获得s.th。像这样：

$(".divs > div").each(function (e) {
    if (e != 0) $(this).hide();
});

$("#next").click(function () {
    if ($(".divs > div:visible").next().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).next().fadeIn(1000)
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:first").fadeIn(1000);
        });
    }
    return false;
});

$("#prev").click(function () {
    if ($(".divs > div:visible").prev().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).prev().fadeIn(1000);            
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:last").fadeIn(1000);
        });

    }
    return false;
});

请注意，（和

.fadeOut（）

）支持回调函数，如果动画完成，将触发回调函数。否则，您的

div

将跳转，显示

如果您想在下方浮动div，只需移除

位置：绝对

。您还可以将其设置为

position:relative

---

只需将

.show（）

更改为

.fadeIn（1000）

和

.hide（）

更改为

.fadeOut（1000）

这里是您更新的这类功能，但我不想一个人的位置是绝对的，也不想为#prev和#next设置一个顶部，因为我想#prev和#next在div容器下面浮动，没有一个绝对的位置看看我的答案，这可能会帮助你有点工作，但当它是开的。cls1它不会去上一个div（最后一个）有一个原因，你不能添加没有代码的小提琴链接。请在回答中提供您的代码这很好，但我的问题是在div列表中放置一个div将导致隐藏所有div的可见性@RobbieFikes查看我的更新答案，您必须更改

.each（）

-部分的选择器以隐藏div。

是直接同级选择器。经过完整迭代后，内容可见，但在第二次往返时，内容不可见display@RobbieFikes是的，我知道了，请更新所有选择器以仅引用直接子对象。请参阅我的最新答案。

$(document).ready(function(){
$(".divs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$("#next").click(function(){
    if ($(".divs div:visible").next().length != 0)
        $(".divs div:visible").next().fadeIn(1000).prev().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:first").fadeIn(1000);
    }
    return false;
});

$("#prev").click(function(){
    if ($(".divs div:visible").prev().length != 0)
        $(".divs div:visible").prev().fadeIn(1000).next().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:last").fadeIn(1000);
    }
    return false;
});
});

.cls1{
   background: red;
   height: 200px;
   width: 200px;
   position: absolute;
}
.cls2{
background: blue;
height: 200px;
width: 200px;
position: absolute;
}
.cls3{
background: green;
height: 200px;
width: 200px;
position: absolute;
}
#prev{
background: gray;
height: 50px;
width: 50px;
}
#next{
background: orange;
height: 50px;
width: 50px;
}
.divs { height: 200px; }

$(".divs > div").each(function (e) {
    if (e != 0) $(this).hide();
});

$("#next").click(function () {
    if ($(".divs > div:visible").next().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).next().fadeIn(1000)
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:first").fadeIn(1000);
        });
    }
    return false;
});

$("#prev").click(function () {
    if ($(".divs > div:visible").prev().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).prev().fadeIn(1000);            
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:last").fadeIn(1000);
        });

    }
    return false;
});