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

我不确定你想要什么，但是你做了很多错事：

var img = $('#image')[0];这是错误的。您不必提供索引，因为$('#image')只会选择一个元素（ID为image的元素）。因此，var img=$('#image')就可以了。
< / LI>
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以获取完整且有效的代码。

Answer 4

这将运行一次，forwards会将所有指定的值设置为100％给出的值。

. fadeIn {
  animation: fade-in 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  100% {   
    opacity: 1;
  }

这是一个纯CSS解决方案，就像您在编辑中要求的那样。

Answer 5

这是一个解决方案。它只是使用jquery的css函数。它在jsfiddle中：https://jsfiddle.net/74rgwh38/

$(document).ready(function() {
  $("#clickHere").click(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" />');
setTimeout(function(){ $("#image").css('opacity', '1'); }, 1);
  });
});

.fadeIn {
  opacity: 0;
  -moz-transition: opacity 5.5s ease 0.3s;
  -webkit-transition: opacity 5.5s ease 0.3s;
  -o-transition: opacity 5.5s ease 0.3s;
  transition: opacity 5.5s ease 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button id="clickHere">
    ClickHere
  </button>
</body>

这不是纯CSS，而是使用CSS转换属性。

单击时css不透明度转换

5 个答案: