Flickr 悬停照片

Question

我正在尝试创建照片列表，当您将鼠标悬停在它们上面时，它们应该会放大。但是，出于某种原因，我无法让它们放大。我在顶部添加了一张照片 class 并放大了，所以我很困惑。

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

<!-- initalisation
var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=8489f42538c845c42b590276f04d6d5b&per_page=15";
var tags = $("input[type='radio'][name='radio']:checked").val();
getPictures();
var src;

<!-- handles the radio button input then calls getPictures
$("input[name='radio']").change(function(){
    tags = $("input[type='radio'][name='radio']:checked").val();
    $('#images').empty();
    getPictures();
});

<!-- jQuery function to get the flickr photos
function getPictures()
{
    $.getJSON(url + "&tags=" + tags + "&format=json&jsoncallback=?", function(data){
        $.each(data.photos.photo, function(i,item){
            <!-- return 3 columns
            if( i % 3 == 0 && i != 0)
                $("#images").append("<br />");

            src = "http://farm"+ item.farm +".staticflickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg";
            var image = $("<img class='resize'/>").attr("src", src);
            var imagelink = "http://www.flickr.com/photos/" + item.owner + "/" + item.id + "/";
            var link = $("<a>").attr("href", imagelink);
            link.append(image);
            $("body").append(link);

        });
    });

}

$(document).ready(function(){
    $('.resize').mouseenter(function() 
           {
              $(this).animate({width: "30%", height: "30%"}, 'slow');
           });

    $('.resize').mouseleave(function()
    {   
        $(this).animate({width: "10%"}, 'fast');
    });
});

</script>
</head>
<body>
 <form>
  <input type="radio" name="radio" value="HTML5"> HTML5 Apps<br>
  <input type="radio" name="radio" value="Hybrid" checked> Hybrid Apps<br>
  <input type="radio" name="radio" value="Native"> Native Apps<br>
</form> 
<img src="http://www.lindanieuws.nl/cache/img/c-500-280/wp-content/uploads/2014/09/hh-41198294-e1411643634795.jpg" class="resize"/> 
<div id="images" position="absolute"></div>



</body>
</html>

Answer 1

您动态插入 .resize 图片，这意味着它们在 页面加载后 出现。为了监听事件，请使用以下内容：

$('body').on('mouseenter', '.resize', function(){
  ...
})

mouseleave 也一样。

Flickr 悬停照片

Flickr hover photos

jquery

flickr

mouseenter