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完整和工作代码。