CODEWITHSUNDEEP
javascriptjqueryjquery-animate
user1750573
user1750573

Reputation: 45

First show, after hide via jQuery

I have this HTML structure:

 <div id="side-menu">
            <ul>
            <li><img src="img/once_sonra.png"></img></li>
            <li><img src="img/online_destek.png"></img></li>
            <li><img src="img/sizi_arayalim.png"></img></li>
            </ul>

  </div>

CSS:

#side-menu {
    display:block;
    z-index:20;
    position:fixed;
    right:0;
    top:76px;
}

I want, when click my page show this items and after hide with animate effect but i dont know how can i do? Thanks.

Upvotes: 1

Views: 844

Answers (2)

Kelvin
Kelvin

Reputation: 5317

You'll need to bind to the click event of the page:

jQuery(function($) {
    var $sideMenu = $('#side-menu'),
        itemClicked = false; // Use to determine whether an item was clicked

    $sideMenu.hide();

    // Catch clicks on the document
    $(document.body).click(function(e) {

        // Check if the menu is visible
        if (!$sideMenu.is(':visible')) {
            $sideMenu
                .stop(true) // Cancel any animation from a previous click
                .show(); // Show the menu

            // Set a timer to hide the menu after 5 seconds if nothing was clicked
            setTimeout(function() {
                if (!itemClicked) {
                    $sideMenu.slideUp(); // Hide the menu with the slideUp effect
                }
                itemClicked = false; // Reset the flag for next time round
            }, 5000); 
        }
    });

    // Catch clicks on menu items
    $sideMenu.click(function(e) {
        itemClicked = true;
    });
});​

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

Something like this:

$(document).ready(function() {
    // hide the menu initially
    $("#side-menu").hide();
    $(document).click(function() {
        // on click show and then hide menu with animation
        $("#side-menu").slideDown().delay(500).slideUp();
    });
});

Demo: http://jsfiddle.net/dhVzq/

If you don't like the slide effect jQuery gives you several other options.

Upvotes: 2

Related Questions