Strange jquery effect

Posted on 2011-10-11
Last Modified: 2012-05-12

I am just learning jquery and I want to create a box that drops down and stays down when a user hovers over the top area of my site. It's kind of working, but right no it looks a little jumpy. I just want the bottom of the blue box to pull down into the final position, without the jump back to the top. Does anyone know what I'm doing wrong here?

Question by:elliottbenzle
    LVL 2

    Accepted Solution

    The problem you are having is that during slideUp() and slideDown() the blue-dropdown div is clearing the floated elements in the header.  Overflow-y is set during the animations which I believe is the root of the problem.

    There are different approaches to work around this, but I thought this might be the simplest:

    1) Always clear the blue-background div below the floated elements
    2) Add a negative value to the `top` property to move the blue-background into the proper position

    .blue-dropdown {
        background-image: url(../images/blue-dropdown.png);
        height: 150px;
        width: 820px;
        z-index: -50;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        display: none;
        clear: both;
        top: -78px;

    Open in new window

    LVL 4

    Author Closing Comment

    That worked great. Thanks so much!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now