如何添加动画类？

使图像dissappear但如果我woud做我的元素将dissapear没有动画

我希望它dissappear慢慢

我知道有一些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"); 
}

来源

2014-05-01 George

你使用的是jQuery吗？为什么不使用fadeOut（）？ – kthornbloom

http://stackoverflow.com/questions/23414413/jqeury-onclick-addclass-removeclass-and-add-fade/23414542#23414542 –

而不是javascript解决方案，如果您愿意使用（例如）opacity而不是display，则可以使用CSS transitions。

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

来源

2014-05-01 20:06:39 abtrout

对这个问题的第二个最佳答案 –

谢谢这就是我一直在寻找 – George

我看到第二好的原因是因为CSS动画并不总是被支持的，所以从我的角度来看，它们只能用于添加布局，而不是为任何形式的动作提供功能。但是，那里再次，只是个人意见 –

你将不得不做这样的事情

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

来源

2014-05-01 20:02:06

最佳答案我看到 –

尝试.fadeOut - .fadeOut的

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

文档被HERE

通过CSS-

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

来源

2014-05-01 20:02:10 Neil

我想throught CSS 我知道这throught jQuery的 – George

“缓慢”添加类是不可能的。如果你想拥有它，那么它就在那里，如果你想要的话可以被删除。就像问题的答案是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中，您可以使用“慢”或“快”代替d以毫秒为单位，慢为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

来源

2014-05-01 20:03:12 Bluedayz

我知道但我想通过css3 – George

也许这可以帮助你吗？ https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions – Bluedayz

如何添加动画类？

回答

相关问题