QuestionsUsing CSS Transitions to SlideUp and SlideDown
mmWebetutorial Staff asked 2 weeks ago

Basically, if you want the effect that you touch or click on an item and that then a menu drops down below. Another click or touch and the menu slides back up.

CSS:-

.fadein, .fadeout {
opacity: 0;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.fadein {
opacity: 1;
}
.container{
padding: 40px;
}

 

HTML:-

<div class=”container” >
<button id=”Trigger2″>FadeIn/FadeOut</button>
<div id=”Fader” class=”fadeout”>
Hello World for fade in or fade out
</div>
</div>

jQuery:-

jQuery(“#Trigger2”).click(function () {
if (jQuery(“#Fader”).hasClass(“fadeout”)){
jQuery(“#Fader”).removeClass(“fadeout”).addClass(“fadein”);
}else{
jQuery(“#Fader”).removeClass(“fadein”).addClass(“fadeout”);
}
});

Your Answer
Login
Enter email and password to comment or answer
Not the answer you are looking for? Browse other questions tagged or ask your own question.