instafeed.jsのJQueryのホバー

私はinstafeed.js（http://instafeedjs.com/）で私のWebページのInstagramフィードを処理していました。instafeed.jsのJQueryのホバー

イメージと必要なデータが表示されますが、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>

出典

2017-08-08 Dani Martínez

以下は、コード内のいくつかの問題です。

1.hover関数は動的に作成された要素にバインドされません。

2.hoverも値下げされました。：.on() jQuery doc pagesを使用する必要があります。

は、あなたのケース事情を聴く私はあなたがそれを交換する必要があるユーザーIDとアセストークンをマスクしていたあなたを助けるサンプルコードに続いてmouseentermouseleave

を使用することをお勧めし使用することをお勧めします。

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-08 11:26:18

instafeed.jsのJQueryのホバー

答えて

関連する問題