jQuery fadeTo不使用'；s放置在同一个脚本标记中

好的，我正在使用instagram的API检索个人资料图像和用户名。此外，我希望当鼠标悬停在配置文件上时，配置文件图像会淡出。然而，这似乎不起作用，我不确定这是否是因为img被放置在script标记中。我已经找了好几个小时的答案，但都找不到。所以如果有人帮助我，我会非常感激

<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>

$（文档）.ready（函数（）{
$（'#图像'）。悬停（函数（）{
$（“.img”）.fadeTo（“fast”，0.5）；
}，函数（）{
$（“.img”）.fadeTo（“fast”，1）；
});
$（“输入”）。按键（功能（事件）{
if（event.which==13）{
event.preventDefault（）；
$（“#图像”）.empty（）；
$.ajax({
键入：“GET”，
url:'get_info.php'，
数据：{关键字：$（“输入”）.val（）}，
数据类型：“JSON”，
成功：
函数（jsonStr）{
$.each（jsonStr.data，函数（索引，元素）{
$（'#images'）。追加（“@”+element.username+”）；
});
}
});
}
});
});

图像将动态添加到DOM中，因此必须使用事件委派。但是，

.hover

本身没有委派，因为它是

mouseenter

和

mouseleave

的快捷方式。使用这些事件进行授权：

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

请注意，您正在附加具有相同ID的多个元素。ID必须唯一，请改用类

---

阅读有关事件委派的信息

您的映像将动态添加到DOM中，因此您必须使用事件委派。但是，

.hover

本身没有委派，因为它是

mouseenter

和

mouseleave

的快捷方式。使用这些事件进行授权：

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

请注意，您正在附加具有相同ID的多个元素。ID必须唯一，请改用类

---

阅读有关事件委派的信息

这里的其他答案很好，可以解决您的问题，但实际上，CSS转换可以更好地处理此类问题

首先，您要创建许多具有相同ID的元素，这是一个很大的禁忌，因为ID对于页面应该是唯一的。改为使用类（我在下面的代码段中将

id='img'

更改为

class='img'

）：

---

这里的其他答案很好，可以解决您的问题，但实际上CSS转换可以更好地处理此类问题

首先，您要创建许多具有相同ID的元素，这是一个很大的禁忌，因为ID对于页面应该是唯一的。改为使用类（我在下面的代码段中将

id='img'

更改为

class='img'

）：

---

+关于这方面的经验教训。正在考虑在悬停时使用事件委派。关于这方面的学习，请使用+1。正在考虑在悬停时使用事件委派。

.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;
}