jQuery fade不要使用放置在同一個腳本標記中的img標記

好吧，我正在使用instagram的API檢索配置文件圖像和用戶名。此外，我希望配置文件圖像在鼠標懸停在其上時消失。但是，這似乎並沒有工作，我不知道是否因爲img放在腳本標記內。我一直在尋找答案的時間，但我找不到任何答案。所以如果有人幫助我，我會很感激。jQuery fade不要使用放置在同一個腳本標記中的img標記

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

來源

2014-11-14 Sarah

您的圖像被動態添加到DOM，因此您必須使用事件委派。但是，.hover本身沒有委派，因爲它是mouseenter和mouseleave的快捷方式。使用這些事件進行授權：

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

請注意，您正在追加具有相同ID的多個元素。 ID必須是唯一的，而不是使用類。

閱讀有關該事件的代表團here.

來源

2014-11-14 19:20:25

+1上的學習收穫。正在考慮在懸停時使用事件代表團。 – Tim 2014-11-14 19:22:24

@卡爾安德烈謝謝，它的工作！ – Sarah 2014-11-14 20:13:39

其他的答案這裏是好的，將解決你的問題，但實際上這樣的事情是更好的CSS過渡處理。

首先，您創建了許多具有相同ID的元素，這是一個很大的禁忌，因爲ID應該是頁面唯一的。使用類代替（所有我在下面的代碼片段改變的是id='img'到class='img'）：

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

然後你就可以使用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; 
}

來源

2014-11-14 19:27:07

jQuery fade不要使用放置在同一個腳本標記中的img標記

回答

相關問題