Clash Royale CLAN TAG#URR8PPP

Animating 4 div boxes only animates 2 instead of 4

I have a grid of 4 boxes that I want to do a fade effect on using jquery when I hover around it. Currently only 2 of the boxes animate. How do I make the other 2 boxes animate as well. Please see below snippets of my jquery code and HTML.

<div class="col-6">

<div class="row">
<div class="card-group">

<div id="xxx" style="background-color: #7a3f24;" class="card text-white">
<img id="xx" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
<div class="card-img-overlay">
<p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
<ion-icon size="large" name="logo-facebook"></ion-icon>
</p>
<h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
Follow for news
<br> and events
</h2>

</div>



</div>

<div id="linkedInBox" style="background-color: #e9c9a5;" class="card text-white">
<img id="li" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
<div class="card-img-overlay">
<p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
<ion-icon size="large" name="logo-linkedin"></ion-icon>
</p>
<h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
Follow for career opportunities
</h2>

</div>
</div>
</div>

<div class="w-100 d-none d-md-block"></div>



<div class="card-group">

<div id="twitterBox" style="background-color: #23374a;" class="card bg-dark text-white">
<img id="tw" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
<div class="card-img-overlay">
<p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
<ion-icon size="large" name="logo-twitter"></ion-icon>
</p>
<h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
Follow for news
<br> and conversations
</h2>

</div>
</div>

<div id="instagramBox" style="background-color: #267d69;" class="card bg-dark text-white">
<img id="in" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
<div class="card-img-overlay">
<p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
<ion-icon size="large" name="logo-instagram"></ion-icon>
</p>
<h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
Follow the studio for updates
</h2>

</div>
</div>
</div>
</div>
</div>


The above code is my HTML

<script>
$('#linkedInBox').hover(
function ()

$('#li').fadeIn('slow');
, function ()

$('#li').fadeOut('slow');

);
$('#twitterBox').hover(
function ()

$('#tw').fadeIn('slow');
, function ()

$('#tw').fadeOut('slow');

);
$('#xxx').hover(
function ()

$('#xx').fadeIn('slow');
, function ()

$('#xx').fadeOut('slow');

);
$('#instagramBox').hover(
function ()

$('#in').fadeIn('slow');
, function ()

$('#in').fadeOut('slow');

);
</script>


The code above is my Jquery code. The LinkedIn and Twitter Boxes animate as expected but the others don't. I created a css class

<style>

.dontdisplay
display: none;


</style>


2 Answers
2

The id is not with big B in facebookBox element.

#faceBookBox to #facebookBox

#faceBookBox

#facebookBox

$('#facebookBox').hover( function ()
$('#fb').fadeIn('slow');
, function ()
$('#fb').fadeOut('slow');
);


The id on #faceBookBox is wrong. Should be #facebookBox.

$('#faceBookBox').hover( should be $('#facebookBox').hover(

$('#faceBookBox').hover(

$('#facebookBox').hover(

Also, you're closing an extra </div> element in your HTML.

</div>

EDIT: Add the following css to start with images hidden and only show the first time on hover. Also updated fiddle

img
display:none;



Check this working fiddle.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.