CODEWITHSUNDEEP
jqueryhtmlcssanimationjquery-hover
Alireza Behnamnik
Alireza Behnamnik

Reputation: 336

show div with fadeInUp on hover and fadeOutDown on mouseover

I want to make a box who when i hover on that box my div show with fadeInUp animation and after mouseover animation fadeOutDown was load

I'll try this but didn't work:

$(".link-box").hover(function(event){
    $('div[class^='link-txt-']').addClass('fadeInUp visible');
},function(){
    $('div[class^='link-txt-']').removeClass('fadeOutDown');
});
.links {
    width: 100%;
    height: 43vh;
}
.link-section {
    float: left;
    width: 33.333%;
    text-align: center;
	position:relative;
}
.link-box {
    width: 50%;
    border-radius: 100%;
    height: 34vh;
    border: 2px solid #0d0d0d;
    margin: auto;
}
.link-img {
    width: 100%;
    border-radius: 100%;
    height: 34vh;
}
div[class^="link-txt"] {
    border-radius: 100%;
    height: 34vh;
    position: absolute;
    top: 0;
    width: 50%;
    text-align: center;
    background: rgba(13,13,13,0.7);
	display:none;
	border:1px solid rgba(13,13,13,0.7);
}
div[class^="link-txt"] span {
    width: 80%;
    height: 15vh;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #FFF;
    left: 0;
    right: 0;
}

.visible {display:block;}
.hidden {display:none;}
	<div class="links">
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> </div>
	  </div>
	 </div>
	</div>

I using this css file too: https://daneden.github.io/animate.css/

Upvotes: 1

Views: 1239

Answers (3)

Mahfuz Ahmed
Mahfuz Ahmed

Reputation: 731

also can be used animate CSS

very easy to use. Exmp:-

<html> <div class="animated fadeInUp "> test </div> </html>

and use fadeOutDown or anything that you need on hover

Upvotes: 0

Alireza Behnamnik
Alireza Behnamnik

Reputation: 336

I can find it :D

This is my code and thats work very fine:

$(function() {
    $('.link-box').hover(function() {
        $(this).find('div[class^=link-txt-]').removeClass('visible animated fadeOutUp');
        $(this).find('div[class^=link-txt-]').addClass('visible animated fadeInDown');
      },
      function(){
        $(this).find('div[class^=link-txt-]').removeClass('visible animated fadeInDown');
        $(this).find('div[class^=link-txt-]').addClass('visible animated fadeOutUp');
      }
   );
});
.links {
    width: 100%;
    height: 43vh;
}
.link-section {
    float: left;
    width: 33.333%;
    text-align: center;
	position:relative;
}
.link-box {
    width: 50%;
    border-radius: 100%;
    height: 34vh;
    border: 2px solid #0d0d0d;
    margin: auto;
}
.link-img {
    width: 100%;
    border-radius: 100%;
    height: 34vh;
}
div[class^="link-txt"] {
    border-radius: 100%;
    height: 34vh;
    position: absolute;
    top: 0;
    width: 50%;
    text-align: center;
    background: rgba(13,13,13,0.7);
	display:none;
	border:1px solid rgba(13,13,13,0.7);
}
div[class^="link-txt"] span {
    width: 80%;
    height: 15vh;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #FFF;
    left: 0;
    right: 0;
}

.visible {display:block !important;}
<link href="http://persian-gamers.ir/images/gioco/css/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="links">
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> </div>
	  </div>
	 </div>
	</div>

Thank you all

Upvotes: 0

Jones Joseph
Jones Joseph

Reputation: 4938

If i understood it correct, this must work for you,

Check out animate.css documentaion, you have to add animated fadeInUp not just the animation name.

Also your animation would not show because your div is actually hidden by your CSS, so we need to show that too before animating.

$(".link-box").hover(function(event) {
  $(this).find('div[class*=link-txt-]').show();
  $('div[class*=link-txt-]').addClass('animated fadeInUp visible');
}, function() {
  $(this).find('div[class*=link-txt-]').addClass(' animated fadeOutDown');
});
.links {
  width: 100%;
  height: 43vh;
}
.link-section {
  float: left;
  width: 33.333%;
  text-align: center;
  position: relative;
}
.link-box {
  width: 50%;
  border-radius: 100%;
  height: 34vh;
  border: 2px solid #0d0d0d;
  margin: auto;
}
.link-img {
  width: 100%;
  border-radius: 100%;
  height: 34vh;
}
div[class^="link-txt"] {
  border-radius: 100%;
  height: 34vh;
  position: absolute;
  top: 0;
  width: 50%;
  text-align: center;
  background: rgba(13, 13, 13, 0.7);
  display: none;
  border: 1px solid rgba(13, 13, 13, 0.7);
}
div[class^="link-txt"] span {
  width: 80%;
  height: 15vh;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #FFF;
  left: 0;
  right: 0;
}
.visible {
  display: block;
}
.hidden {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links">
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> 
      </div>
    </div>
  </div>
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> 
      </div>
    </div>
  </div>
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> 
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions