將jquery應用到動態創建的圖像

我是新來的Javascript/jquery和PHP，我正在試驗它。基本上，我創建了一個簡單的圖片庫，其中每張圖片的不透明度爲.4，直到您將它放在它上面，並且它變得100％不透明。現在我已經走得更遠了，並使用PHP掃描圖像目錄並將它們添加到圖庫中的圖片列表。當前的代碼看起來是這樣的：將jquery應用到動態創建的圖像

$(document).ready(function(){ 

var i = 0; 
var names; 

function returndata(files){ 
    names = files; 

    for(i=0; i < names.length ; i++){ 
     $('<li id="img_' + i + '"><img src="../Gallery_pictures/' + names[i] + '"/></li>').appendTo('#thumbnails ul'); 
    }  
} 

$.post('../php/read_directory.php',function(data){ 
    var files = $.parseJSON(data); 
    returndata(files); 
    }); 
});

代碼工作，並增加了圖像列表上的網頁，但我將如何去加入jQuery的淡入淡出到新創建的圖像？我已經搜遍了各地的答案，但也許我只是錯過了答案。這和圖像淡入淡出是在單獨的外部JavaScript文件。提前致謝。

* 編輯： *好吧，我已經使用您的建議，它的工作原理，但現在的問題是，腳本不會開始，直到圖像最初被淹沒。所有的照片開始完全不透明，直到被淹沒，然後它們全部變成.4不透明。有任何解決這個問題的方法嗎？我也會嘗試，如果我可以輕鬆地在CSS中做到這一點。

* DOUBLE EDIT： *所以我可以很容易地做到這一點與CSS，它的工作原理就像我想要的。感謝大家的回覆。

來源

2011-12-23 Paha

使用on如果你正在使用jQuery預1.7，那麼你可以使用delegate上設置動態添加的內容

$(document).on("mouseover", "#thumbnails img", function() { 
    $(this).css("opacity", 1); 
}); 

$(document).on("mouseout", "#thumbnails img", function() { 
    $(this).css("opacity", 0.4); 
});

事件。請注意，委託首先選擇選擇器，然後是事件名稱。使用live因爲它是

$(document).delegate("#thumbnails img", "mouseover", function() { $(this).css("opacity", 1); }); $(document).delegate("#thumbnails img", "mouseout", function() { $(this).css("opacity", 0.4); });

避免過時。

來源

2011-12-23 07:51:56

您可以舉一個例子，將其與自定義函數/插件一起使用，例如[hoverpulse]（http://jquery.malsup.com/hoverpulse/jquery.hoverpulse.js）。我面臨的主要問題是它也希望將某些值傳遞給hoverpulse在選擇器上調用時返回的函數。 '$（document）.ready（function（）{（'div.thumb img'）。hoverpulse（{size：40， speed：400 }）; }）;' 如何通過on（）傳遞這樣的函數的選項？ – Atharva 2012-11-08 12:12:25

嘗試添加class="hoverImg"您img，然後執行以下操作：

$('.hoverImg').on('hover',function(){ 
     // here goes your hover code 
});

所以每次圖像具有類.hoverImg也是新的。並且將事件懸停綁定到類別爲.hoverImg的每個圖像上。爲什麼你必須使用.on()，因爲這樣可以確保在完全加載後，如果img被添加到你的dom中，代碼也會被執行。

來源

2011-12-23 07:48:08

好吧，所以我補充說，他們是在你回答後，在單獨的JavaScript文件。我應該在你給我的內容中使用$ .getScript調用，還是隻將外部文件中的內容放在內部？ – Paha 2011-12-23 07:52:36

我建議您將代碼放在.js文件中，然後只需將.js文件添加到頭部或身體部分中即可： – 2011-12-23 07:56:15

使用.live()或.on()將事件綁定到動態添加的元素。
.live()被棄用的jQuery 1.7

來源

2011-12-23 07:50:47 xyz

將jquery應用到動態創建的圖像

回答

相關問題