Issue
I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. click here however i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction.
/** HTML **/
div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
/* jquery **/
$(".overlay").addClass("visible");
$(".overlay").removeClass("visible");
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("visible");
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("visible");
});
/** CSS ANIMATION **/
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@-Webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
Solution
Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});
Answered By - user1333371
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.