CODEWITHSUNDEEP
jqueryhtmlbuttonopacity
James Novis
James Novis

Reputation: 343

Unresponsive jQuery on divs

I have run into a few problems with jQuery. I have learnt HTML and CSS and now am experimenting with making divs affect divs.

I have the following in my HTML doc.

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

<img src="../Images/film_icon.png" id="picture_on">

<script> 

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

</script>

I want to be able to click on the picture with the id="film_on" to make the movie id="MinecraftVideo" go to 50% transparency.

I have tried the above code but the picture/button remains unresponsive. Could you please point me in the right direction.

Upvotes: 1

Views: 126

Answers (1)

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

Well here working code, check it here.

$(document).ready(function() {
  $('#picture_on').click(function() {
    $('#MinecraftVideo,#picture_on').animate({
      opacity: '0.5'
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MinecraftVideo">
  <iframe width="630" height="350" src="https://www.youtube.com/embed/MmB9b5njVbA" frameborder="0" allowfullscreen id="Minecraft"></iframe>
</div>

<img src="http://2.bp.blogspot.com/-zNG-B0kXgRQ/U--a1LM-krI/AAAAAAAAFZk/S3pk18znFdY/s400-c/Best-Games.jpg" id="picture_on">

Upvotes: 1

Related Questions