css不透明切换单击

pkwftd7m 于 2023-01-10 发布在其他

关注(0)|答案(5)|浏览(134)

有没有什么方法可以让这个图像淡入使用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转换属性。

css

来源：https://stackoverflow.com/questions/17201511/css-opacity-transition-on-click

5条答案

按热度按时间

dgsult0t1#

它弹出为完全不透明度，因为您在脚本中将不透明度设置为完全（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);
};

赞(0）回复(0）举报 2023-01-10

n1bvdmb62#

听起来，解决您的问题的最简单答案就是使用JQuery的.fadein()。
JQuery自己的示例代码应该对这里的参考有所帮助。

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

赞(0）回复(0）举报 2023-01-10

hjzp0vay3#

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

赞(0）回复(0）举报 2023-01-10

mbskvtky4#

这里有一个解决方案，只需要使用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的过渡属性。

赞(0）回复(0）举报 2023-01-10

bxjv4tth5#

我假设您只想在单击按钮时应用类.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以获取完整的工作代码。

赞(0）回复(0）举报 2023-01-10

我来回答

css不透明切换单击

5条答案

相关问题

热门标签

最新问答