JQuery悬停在instafeed.js上

时间:2017-08-08 10:53:30

标签: jquery instafeedjs

我一直在使用instafeed.js(http://instafeedjs.com/)为我的网页制作Instagram Feed。

它工作,显示我需要的图像和任何数据,但jQuery无法识别instafeed.js创建的对象(在“模板”上定义的对象)。

<body>

    <div id="instafeed"></div>

    <script>
        var userFeed = new Instafeed({
        get: 'user',
        userId: '**********',
        accessToken: '*************************',
        resolution: 'standard_resolution',
        template: '<img src="{{image}}"/> <div id="hover"><p>{{caption}}</p></div>'
        });

        userFeed.run();
    </script>

    <script>
        $("#hover").hover(function(){
           $(this).fadeOut(40);
           $(this).fadeIn(80); 
        });
    </script>

</body>

1 个答案:

答案 0 :(得分:0)

以下是您的代码中的一些问题。

1.hover函数不会绑定到动态创建的元素。

2.hover也已弃用,您需要.on()使用mouseenter

3.在您的情况下,最好使用它最好使用mouseleave var userFeed = new Instafeed({ get: 'user', userId: '<enter your user id>', accessToken: '<enter acess token>', resolution: 'standard_resolution', template: '<img src="{{image}}"/> <div class="hover"><p>{{caption}}</p></div>' }); userFeed.run(); $('body').on("mouseenter", ".hover", function() { // hover starts code here $(this).fadeOut(40); }); $('body').on("mouseleave", ".hover", function() { // hover ends code here $(this).fadeIn(80); });

以下示例代码将帮助您屏蔽用户ID和访问令牌 你需要更换它。

<div id="instafeed"></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>
Python