jQuery fadeTo not working with an img tag that's placed in the same script tag

Question

Okay i am using the instagram's API to retrieve profile images and usernames. Moreover, i want the profile images to fade when the mouse hovers over it. However, that doesn't seem to work and I'm not sure if it's because the img is placed inside the script tag. I've been looking for hours for an answer but i couldn't find any. So i'd really appreciate it if someone helped me.

<script>


        $(document).ready(function () {



               $('#images').hover(function () {
                    $(".img").fadeTo("fast",0.5);
                }, function () {
                     $(".img").fadeTo("fast",1);
                });


            $("input").keypress(function (event) {

                if (event.which === 13) {
                    event.preventDefault();

                    $("#images").empty();
                    $.ajax({
                        type: 'GET',
                        url: 'get_info.php',
                        data: {keyword: $("input").val()},
                        dataType: 'JSON',
                        success:
                                function (jsonStr) {
                                    $.each(jsonStr.data, function (index, element) {


                                        $('#images').append("<div class='instaUser'><img  class='img' src=" + element.profile_picture + " /><span class='username'>@" + element.username + "</span></div>");

                                    });
                                }

                    });
                }
            });
        });

    </script>

Answer 1

Your image is dynamically added to the DOM, so you have to use event delegation. However, .hover doesn't have delegation by itself since it's a shortcut to mouseenter and mouseleave. Use those events for delegation:

$('#images').on({
    mouseenter : function(){
        $(this).fadeTo("fast",0.5);
    },
    mouseleave : function(){
        $(this).fadeTo("fast",1);
    }
}, '#img');

Please, take note that you are appending multiple elements with the same ID. IDs must be unique, use classes instead.

Read about the event delegation here.

Answer 2

The other answers here are good and will fix your issue, but really this sort of thing is better handled by CSS transitions.

First off, you're creating many elements with the same ID, this is a big no-no as IDs should be unique to the page. Use classes instead (all I changed in the following snippet is id='img' to class='img'):

$('#images').append("<div id='instaUser'><img class='img' src=" + element.profile_picture + " /><span id='username'>@" + element.username + "</span></div>");

And then you can add a simple opacity transition using CSS:

.img {
    // The normal, non-hovered opacity (100%)
    opacity: 1.0;

    // Cross-browser transition which animates the opacity of the image
    // for 200 millisecons using an ease-in easing function.
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    -ms-transition: opacity 200ms ease-in;
    -o-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
}

.img:hover {
    // The opacity you want to end at, so long as the mouse stays over the image (50%)
    opacity: 0.5;
}