show div and execute CSS animation in separate div on “li hover”

Question

I am trying to show a css animation when hovering on nav li a . So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.

        .box {
      -webkit-animation: dropdownbar 1s ease;
      -moz-animation:    dropdownbar 1s ease;
      -o-animation:      dropdownbar 1s ease;
      animation:         dropdownbar 1s ease;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      width:100%;
      background-color:#000;
      color:#fff

    }

    @-webkit-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-moz-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-o-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }

        <nav class="nav">
        <ul>
        <li class="navLink"><a href="#">Home</a></li>
        <li class="navLink"><a href="#">Away</a></li>    
        </ul>
        </nav>

        <div class="box">this should show only when hovering li element</div>

FIDDLE

Answer 1

You can use jQuery to trigger the CSS3 animation with a class change :

DEMO

CSS :

.box {
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    width:100%;
    background-color:#000;
    color:#fff;
    height:0;
}
.box.show {
    -webkit-animation: dropdownbar 1s ease;
    -moz-animation: dropdownbar 1s ease;
    -o-animation: dropdownbar 1s ease;
    animation: dropdownbar 1s ease;
    height:35px;
}
@-webkit-keyframes dropdownbar {
    0% {height: 0px;}
    100% {height: 35px;}
}
@-moz-keyframes dropdownbar {
    0% {height: 0px;}
    100% {height: 35px;}
}
@-o-keyframes dropdownbar {
    0% {height: 0px;}
    100% {height: 35px;}
}
@keyframes dropdownbar {
    0% {height: 0px;}
    100% {height: 35px;}
}

jQuery :

$('nav li a').hover(function () {
    $('.box').toggleClass('show');
});

Answer 2

You can try this jQuery. You just have to modify it to your needs... but this should get you started.

$(".navLink").mouseenter(function(){
    $(".box").css("visibility", "visible")
});

$(".navLink").mouseleave(function(){
    $(".box").css("visibility", "hidden")
});

If you put this in your javascript part in jsFiddle, it works.

Answer 3

You have to add style for div box as

<div class="box" style="display:none">

and add following javascript code:

$(document).ready(function(){
    $(".navLink").hover(function(){
        $(".box").toggle();
    });
});

See the updated fiddle: Updated fiddle

Answer 4

There you go :). assumes jquery is up and running!

$(document).ready(function() {
    var divToShow = $('.box');
    var links = $('.navLink');
    var fadeDuration = 500;

    //initial hiding of div
    divToShow.hide();

    //add listener when mouse enters hover-state on link
    links.mouseenter(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it in
        divToShow.fadeIn();
    });
    //add listener for when mouse leaves link
    links.mouseleave(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it out
        divToShow.fadeOut();
    });
});

this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)

Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!