jquery fadein css同时用,html - jQuery fadein fadeout effects in css - Stack Overflow

I am making an app using Cordova and it uses jQuery effects namely fadein and fadeout. The effects are very slow on my android device. I thought of converting them to CSS and I saw ways to do that using toggleClass etc.

Document

$(document).ready(function($) {

$( "#fade" ).click(function() {

$('#fader').toggleClass('fadeout');

});

$('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {

$('#fader').toggleClass('hide');

});

setTimeout(500)

});

div{

background-color: blue;

}

#fader{

display: block;

opacity: 1;

-webkit-transition: opacity 0.35s linear;

-moz-transition: opacity 0.35s linear;

-ms-transition: opacity 0.35s linear;

-o-transition: opacity 0.35s linear;

transition: opacity 0.35s linear;

}

#fader.fadeout{

opacity: 0;

}

#fader.fadeout.hide{

display: none;

}

css

DivButton

But I encountered two issues:

Issue 1

While using jQuery fadein, in the end it sets display to none. Similarly while using fadeout, it removes the display:none property. Also the animations are abrupt. How can I do that in CSS?

Issue 2

I would like to use delay function along with the fadein and fadeout in CSS. How can I achieve that?

Please help guys.

Thanks in advance.