JQuery 悬停在 instafeed.js

Question

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

它可以工作，显示图像和我需要的任何数据，但是 jQuery 无法识别 instafeed.js 创建的对象（在 "template" 上定义的对象）。

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

Answer 1

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

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

2.hover 也已贬值，您需要根据 .on() jQuery doc pages.

使用 .on()

3.In你的情况还是用好用好mouseentermouseleave

以下示例代码将对您有所帮助，我已经屏蔽了用户 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>

JQuery 悬停在 instafeed.js

JQuery hover on instafeed.js

jquery

instafeedjs