Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Hover animation help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #30045
    noahgelman
    Participant

    I have a drop down navigation menu. Very normal. I want the dropdown to animate open when you hover the parent list-item, like a slideToggle(), but at the same time fade in from 0 opacity to 1 opacity and I am having trouble getting them both to work at the same time. It don’t want to use .hide(‘fast’) because that animates open from the top left corner. I want to animate straight down. Makes sense?

    Any Ideas?

    #81297
    noahgelman
    Participant

    Nevermind, I got it. I just realized I had copy and pasted some code below where I was working to use later but I didn’t comment it out so it was running through it as well and messing everything up. Here’s the working code:

    $(document).ready(function() {
    $('.drop-down').css('opacity', 0);
    $('.drop-down').css('display', 'none');
    $('.canvas-drop').hover(
    function () {
    $('.example .drop-down').stop().animate({
    opacity: 1,
    height: 'toggle'
    }, 1000)
    },
    function () {
    $('.example .drop-down').stop().animate({
    opacity: 0,
    height: 'toggle'
    }, 1000)
    }
    );
    });
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.