0

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

它可以工作，显示图像和我需要的任何数据，但 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>
4

1 回答 1

0

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

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

2.hover 也被贬值了，你需要.on()根据.on()jQuery 文档页面使用。

3.在您的情况下，最好使用它更好地使用mouseenter mouseleave

以下示例代码将帮助您掩盖您需要替换它的用户 ID 和访问令牌。

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

于 2017-08-08T11:26:18.880 回答