Question

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

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

我在考虑3个变量

v1,v2,v3

所有这可以是＆＃34; 1＆＃34;或＆＃34; 0＆＃34;所以我可以调用所有变量，例如

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

jquery可视化淡化和重新排序特定图像

1 个答案: