Javascript opacity懸停和無限滾動

我有這段代碼爲我的圖像，所以不徘徊在他們的不透明度可以降低。Javascript opacity懸停和無限滾動

$(document).ready(function() { 
    $("img").css("opacity", 0.8); 
    $("img").hover(function() { 
     $(this).animate({ 
      opacity: 1.0 
     }, 500); 
    }, function() { 
     $(this).animate({ 
      opacity: 0.8 
     }, 500); 
    }); 
});

除此之外，我還使用這個無限滾動碼

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

一起，我只得到儘可能在最初頁面加載定義的第一張照片變得不透明。一旦我向下滾動並用無限滾動腳本加載新圖像，不透明度對它們沒有影響。

我怎樣才能得到這個與無限滾動腳本一起工作？

來源

2012-06-21 Mur Quirk

使用jQuery的事件代表團，而不是hover：

$(document).ready(function() { 
    $("body").on('mouseenter', 'img', function() { 
     $(this).animate({ 
      opacity: 1.0 
     }, 500); 
    }).on('mouseleave', 'img', function() { 
     $(this).animate({ 
      opacity: 0.8 
     }, 500); 
    }); 
});

圖像透明度不應通過JavaScript設置，但作爲一個真正的CSS規則代替。

來源

2012-06-21 01:52:13 Cecchi

那麼如果這些動畫是在純CSS上完成的，應該如何在IE8及更低版本上使用動畫呢？ – Blender

所有jQuery所做的都是修改大量的CSS值，以涵蓋瀏覽器支持的所有基礎。如果您按照本指南設置了CSS，那麼jQuery應該處理其餘部分：http://css-tricks.com/snippets/css/cross-browser-opacity/ – Cecchi

不透明度應該在頁面加載時生效，而不是在頁面上放置它們個別。 –

您需要將事件綁定到動態生成的元素：

$("body").on('hover', 'img', function() { 
    $(this).animate({ 
     opacity: 1.0 
    }, 500); 
}, function() { 
    $(this).animate({ 
     opacity: 0.8 
    }, 500); 
});

替換body與包含所有<img />標籤的元素。

來源

2012-06-21 01:51:53 Blender

Javascript opacity懸停和無限滾動

回答

相關問題