css點擊不透明轉換

Question

有沒有什麼辦法可以讓這個圖像淡入使用CSS轉換定義？現在它只是彈出完全不透明。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script> 
<style type="text/css"> 
.fadeIn { 
    opacity:0; 
    -moz-transition: opacity 5.5s ease 0.300s; 
    -webkit-transition: opacity 5.5s ease 0.300s; 
    -o-transition: opacity 5.5s ease 0.300s; 
    transition: opacity 5.5s ease 0.300s; 
} 
</style> 
<script> 
var makeImage = function() { 
    $('#image').remove(); 

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />'); 

    var img = $('#image')[0]; 
    console.log(img.style); 
    img.style["opacity"] = 1; 
}; 
</script> 

<title>Fade Example</title> 
<input id="makeButton" type="button" value="Make and fade" onclick="makeImage()"; /> 

編輯：我知道有一個由jquery提供的fadeIn函數。我後悔在這個例子中使用jquery，因爲重點是使用CSS轉換屬性。

Answer 1

它彈出來完全不透明，因爲你在你的腳本中設置不透明度爲滿（1 = 100％）：

img.style["opacity"] = 1; 

我不知道CSS轉換是如何工作的，但因爲你是使用jQuery反正：

var makeImage = function() { 
    $('#image').remove(); 

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />'); 

    var img = $('#image')[0]; 
    console.log(img.style); 
    img.fadeIn(5500); 
}; 

Answer 2

這聽起來像最簡單的回答你的問題很簡單，就是使用jQuery的.fadein()。

JQuery自己的示例代碼應該有助於在此處參考。

$('#clickme').click(function() { 
     $('#book').fadeIn('slow', function() { 
     // Animation complete 
     }); 
    }); 

Answer 3

我不知道你想要什麼，但你錯了做這麼多的事情：

1. var img = $('#image')[0];這是錯誤的。您不必提供索引，因爲$('#image')將只選擇一個元素（編號爲image的那個元素）。因此，var img=$('#image')單獨可以。

2. img.style["opacity"] = 1;這是錯誤的。你不會像那樣在JavaScript中訪問樣式屬性。使用點成員來代替。即img.style.opacity = 1;

現在，我假設，你只是想在你的按鈕，點擊應用類.fadeIn，因爲你已經在使用jQuery的，這樣做：

img.addClass('fadeIn'); 

我已經猜到，你要的是改變/切換中的圖像上單擊或負載的不透明度（通過使用CSS3和jQuery的沒有），試試這個：

創建兩個CSS類是這樣的：

.fadeIn { 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
.transparent 
{ 
    opacity:0; 
} 

，只需切換按鈕上的點擊或負載透明類：

$('#toggle').click(function(){ 
    $('#image').toggleClass('transparent'); 
}); 

看到這個fiddle完整和工作代碼。