1

私はこのHTML構造を持っています:

 <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;
}

ページをクリックするとこのアイテムが表示され、アニメーション効果で非表示になった後、どうすればよいかわかりません。ありがとう。

4

2 に答える 2

2

このようなもの:

$(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();
    });
});

デモ: http://jsfiddle.net/dhVzq/

スライド効果が気に入らない場合は、jQuery には他にもいくつかのオプションがあります

于 2012-11-09T00:02:20.507 に答える
0

clickページのイベントにバインドする必要があります。

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;
    });
});​
于 2012-11-08T23:57:50.277 に答える