Question

这是我的网站CodeIgniter制作的网站，

在第一页，当我点击灯泡的按钮时，我可以打开灯，但是我无法通过相同的按钮将其关闭，我尝试了很多jQuery功能，例如on（）和off（），bind（）和unbind（），或打开/关闭按钮，但我仍然无法告诉计算机：

一旦灯亮，你可以停止开启功能并转到关闭功能，然后反过来做同样的事情。

HTML：

<img id="lampe_lumiere" src="<?php echo base_url('assets/img/cadre_vide.png') ?>" alt="lampe_lumiere"/>

<map name="lien">
  <a href="lampe_not_jump">
    <area alt="lampe" shape="poly" coords="" href="#lampe_not_jump" />
  </a>
</map>

我将光效图像放在img的背景中，opacity 0，

灯泡位于area

内的map

CSS：

#lampe_lumiere{
    top:0;
    opacity:0;
    padding:0;
    z-index:-2;
    position:absolute;
    background:url('../../assets/img/lampe_lumiere.png') no-repeat;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

所以我尝试了这样的jQuery：

    var $lampe = $('#lampe_lumiere').css('opacity');

    $('area[alt="lampe"]').bind('click', function(event){
        $('#lampe_lumiere').fadeTo('slow', 1);

        if($lampe == 1){
            $( this ).unbind( event );
            $( this ).bind('click', function(event){
                $('#lampe_lumiere').fadeTo('slow', 0);
            });
        }
    });

一旦我能做到这一点，我会对工厂做同样的事情。

非常感谢能帮助我的人！

Answer 1

尝试这样的事情

$('area[alt="lampe"]').bind('click', function(event){


    if($('#lampe_lumiere').css('opacity') == 1){

            $('#lampe_lumiere').fadeTo('slow', 0);
    }else{
       $('#lampe_lumiere').fadeTo('slow', 1);
    }
});

祝你好运!!!

Answer 2

您可以为不透明度或任何其他css属性设置动画，如下所示：

[[variable]]

200是以ms为单位的速度。

示例：

var $lampe = $('#lampe_lumiere');

$lampe.animate({
    opacity: 0
}, 200);

如何在一个按钮上切换2个jQuery函数（一个按钮打开和关闭指示灯）

2 个答案: