CODEWITHSUNDEEP
javascriptjquery
James Novis
James Novis

Reputation: 343

How to change the transparency of an img using jquery or javascript

I am beginning to dabble in Jquery and javascript and was looking for some advice please. I have below, the following code which makes a video transparent when I click on the image. However, what code would I need to make the image transparent too, upon click?

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

    $("#MinecraftVideo").animate({
                opacity: '0.0'
            });

    $(document).ready(function () {
        $("#picture_on").click(function () {
            $("#MinecraftVideo").animate({
                opacity: '1.0'
            });
        });
    });

</script>

The image has the id="picture_on"

Many thanks

Upvotes: 0

Views: 40

Answers (2)

Vinc199789
Vinc199789

Reputation: 1046

You can use the this selector. This select the element you click on (the image).

<script>
$(document).ready(function () {
    $("#picture_on").click(function () {
        $("#MinecraftVideo").animate({
            opacity: '1.0'
        });
        $(this).animate({opacity: '0'});
    });
});

</script>

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Why not target the image instead?

$(document).ready(function () {
    $("#picture_on").click(function () {
        $(this).animate({
            opacity: '0.5'
        });
    });
});

DEMO

Upvotes: 1

Related Questions