jQuery在instafeed.js上懸停
[英]JQuery hover on instafeed.js
問題描述
我一直在使用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 個解決方案
解決方案1
0 已采納 2017-08-08 11:26:18
以下是代碼中的一些問題。
1.hover函數將不會綁定到動態創建的元素。
2.hover也已貶值，您需要在每個.on() jQuery文檔頁面中使用.on() 。
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>
Instafeed.js和jQuery colorbox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.