CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Michael Hands
Michael Hands

Reputation: 67

Adding animate.css on hover

So my p tag starts as hidden and on hover shows visible. But can anyone help me use animate.css to use the slide in effect on the p tag when I hover?

#div:hover{
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   justify-content: center;
}
h2{
  margin-top: 150px;
  color: #fff;
  display: block;
}
p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: block;
}
<div id="div">
  <div class="div">
    <h2>Header</h2>
    <p></p>
  </div>
</div>

Upvotes: 2

Views: 3684

Answers (3)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use animation-name of slideInUp (predefined in animate.css) on your <p> tag like:

#div:hover p {
  animation-name: slideInUp; // Predefined in animate.css
}

You don't even need to use javascript also. Have a look at the snippet below:

#div { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}
#div:hover {
   background-color: rgba(0,0,0,0.4);
}
#div:hover p {
   animation-name: slideInUp;
}
h2{
  color: #fff;
  display: block;
}
p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: block;
}
body {
  margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<div id="div" class="animated">
   <div class="div">
       <h2>Header</h2>
       <p class="animated">Para</p>
    </div>
</div>

Hope this helps!

Upvotes: 2

Chris
Chris

Reputation: 221

you don't need to use any javascript fot this. https://codepen.io/anon/pen/oeKMRq

see how easy it is to apply effects with css. just apply any value like height to you element and a transtion for height.

then let the height change on hovering over the parent container.

nicer and smoother.

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/g19ej4bd/

$('#div').hover(function(){
  $(this).find('p').slideDown();
}).mouseleave(function(){
  $(this).find('p').slideUp();
});
#div:hover{
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   justify-content: center;
}

h2{
  margin-top: 150px;
  color: #fff;
  display: block;
}

p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div">
   <div class="div">
       <h2>Header</h2>
       <p>dasdas</p>
    </div>
</div>

Please check the jsfiddle as the code isn't working in stackoverflow snippet.

I've used jQuery methods such as hover, mouseleave, slideDown & slideUp.

You can control the speed of slideDown & slideUp by passing parameters.

Reference Document:
slideDown: http://api.jquery.com/slidedown/
slideUp : http://api.jquery.com/slideup/

Hope this will help you.

Upvotes: 0

Related Questions