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

Question

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

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

jsfiddle SCRIPT

我在考虑 3 个变量

v1,v2,v3

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

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

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

谁能帮我解决这个问题？

谢谢！

Answer 1

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

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