JavaScript图像作为按钮（onClick）

Question

我对JavaScript有一点问题，并想知道你是否可以帮助我。我有一个图像和一个视频。我希望能够单击图像并使视频处于透明度的一半。我无法理解为什么我的代码无法正常工作。

图像

<img src="James Outlined.jpg" id="picture_on">

的iFrame

<iframe width="630" height="350" src="https://www.youtube.com/embed/MmB9b5njVbA" frameborder="0" allowfullscreen id="MinecraftVideo"></iframe>

JavaScript代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $(document).ready(function(){
    $(“#picture_on”).click(function(){
    $(“#MinecraftVideo”).animate({
    opacity: '0.5'
        });
      });
    });

</script>

Answer 1

您的代码中存在一些JavaScript语法错误。

  

$（“＃picture_on”）

请勿使用multibyte characters作为分隔符。将”更改为"或'。在使用正确的语法之前，您的代码工作正常。检查此Fiddle。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function(){
    $("#picture_on").click(function(){
        $("#MinecraftVideo").animate({
            opacity: '0.5'
        });
    });
});
</script>

Answer 2

JavaScript图片作为按钮：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#picture_on").click(function(){
            $("#MinecraftVideo").animate({
                opacity: '0.5'
            });
        });
    });
</script>