jQuery懸停在instafeed.js上

我一直在爲instafeed.js（http://instafeedjs.com/）爲我的網頁提供Instagram feed。jQuery懸停在instafeed.js上

它工作，顯示圖像和我需要的任何數據，但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也折舊inted你需要使用.on()每個.on() jQuery doc pages。

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>

來源

2017-08-08 11:26:18

jQuery懸停在instafeed.js上

回答

相關問題