0

有什么方法可以让这个图像使用定义的 CSS 过渡淡入淡出吗？现在它刚刚完全不透明。 

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;
  };
.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;
  }
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<title>Fade Example</title>
<input id="makeButton" type="button" value="Make and fade" onclick="makeImage()" ; />

编辑：我意识到jquery提供了一个fadeIn函数。我很遗憾在这个例子中使用 jquery，因为关键是使用 CSS 转换属性。

4

5 回答 5

0

听起来对您的问题最简单的答案就是使用 JQuery 的.fadein()。

JQuery 自己的示例代码应该有助于在这里参考。

$('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });
于 2013-06-19T21:24:11.677 回答
0

它突然出现完全不透明度，因为您在脚本中将不透明度设置为完全（ 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);
};
于 2013-06-19T21:22:42.967 回答
0

这是一个解决方案。它只是使用 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 转换属性。

于 2020-12-16T05:11:00.300 回答
0

这将运行一次并将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 解决方案，就像您在编辑中要求的那样。

于 2019-06-01T08:30:52.560 回答
-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');
});

请参阅此小提琴以获取完整且有效的代码。

于 2013-06-19T21:42:44.917 回答