jquery - jquery可视化淡入淡出并重新排序特定图像

Question

我在不同的灯光设置下做了一些房间渲染。比制作​​ 3 个按钮来控制灯光。这个想法是淡入或淡出特定图像，我可以打开随机灯，我有图像的所有变化。

从左到右按下按钮，看看我的意思。

jsfiddle脚本

我在考虑 3 个变量

v1,v2,v3

所有 f 这可以是“1”或“0”，所以我可以调用所有变量，例如

"101"  <- mean that first and last light are on

另一个问题是重新排序图像以使正确的图像低于活动图像。

任何人都可以帮我解决这个问题吗？

谢谢你！

Answer 1

嗯，你必须记住的第一件事是你的fadeOut所有图像，然后fadeIn是你想要的作为你的起始图像。然后在单击按钮时执行相同的操作。active为了更简单的 jQuery 方法，我向您的按钮添加了一个虚拟类，如下所示：

<a class="sim1 sim-button active" href="#">v1</a>     
<a class="sim2 sim-button active" href="#">v2</a>
<a class="sim3 sim-button active" href="#">v3</a>

看看这个Fiddle，下面是我的 jQuery 代码：

$(document).ready(function(){
    $("#sim-img img").each(function(){
        $(this).fadeOut(100);
    });
    var selected_image = ".i111";
    $(selected_image).fadeIn(1000);
    $(".sim-button").click(function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
        console.log("prev: "+selected_image);
        $(selected_image).fadeOut(1000);
        selected_image = ".i";
        $(".sim-button").each(function(){
            if($(this).hasClass("active")){
                selected_image += "1";
            }else{
                selected_image += "0";
            }
        });
        $(selected_image).fadeIn(1000);
        console.log("next: "+selected_image);
    });   
});