如何添加動畫類？

使圖像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

如何添加動畫類？

回答

相關問題