Question

我想通过添加一个类

来使图像消失

但是，如果我这样做，我的元素将在没有动画的情况下消失

我想让它慢慢消失

我知道有一些css3属性，但我不知道哪个

我知道如何使用不透明度的动画来做，但我不想要

HTML

<img scr="..." class="a">
<button onclick="make_img_dissappear()">Click to dissappear</button>

CSS

.hide{
display: none;
}
.a{
/*these properties must provide adding class with animation*/
}

JAVASCRIPT

function make_img_dissappear(){
$("img").addClass("hide");
}

Answer 1

如果您愿意使用（例如）opacity代替display，则可以使用CSS transitions代替JavaScript解决方案。

.hide {
  opacity: 0;
}
.a {
  transition: opacity 1s linear; /* vendor prefixes, etc */
}

Answer 2

你必须做这样的事情

function make_img_dissappear(){
    $("img").addClass("hide");
    $( "img" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
}

或

   function make_img_dissappear(){
        $("img").fadeOut("fast");
    }

有关详细信息，请查看Animate documentations，淡出文档为here

Answer 3

尝试.fadeOut -

function make_img_dissappear(){
$("img").fadeOut("slow");
}

.fadeOut的文档是HERE

通过CSS -

.hide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

Answer 4

无法慢慢添加课程＆＃34;。它就在那里，如果你想拥有它，如果你想要它可以删除。就像回答true或false的问题一样。

由于你使用jQuery，我建议你使用它：

$("img").fadeOut(); //400 milliseconds by default

你甚至可以说这个动画应该有多长：

$("img").fadeOut(200); //200 milliseconds

如果要将对象淡化为特殊不透明度，请使用：

$("img").fadeTo(200, 0.2) //animation of 200 milliseconds to an opacity of 0.2

顺便说一句，在jQuery中你可以使用＆＃34; slow＆＃34;或者＆＃34;快速＆＃34;而不是以毫秒为单位的持续时间，慢速为600毫秒，快速为200毫秒。默认值为400毫秒。

了解更多信息：

https://api.jquery.com/fadeTo/

https://api.jquery.com/fadeOut/

我不确定它是否有效，但因为你真的想使用css3：

请看这里：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

在这篇文章中：CSS3 transition fadein with display:none

如何用动画添加课程？

4 个答案: