創建jQuery滑動菜單

Question

想要在此網站幻燈片左側創建jQuery菜單，並在單擊圖標時將其恢復到原始位置。

http://wittlingerorthodontics.com/default2.asp

只能在jsFiddle上實現

http://jsfiddle.net/messi1987/tfASa/

$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";

// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 1000 );
};

// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});

而我想使其滑入並單擊按鈕/圖像滑回原始位置。 jQuery的新手，所以不要在任何地方獲得幫助內容。 幫助我做到這一點。 為了完全理解，請訪問參考網站。

Answer 1

試試這個小提琴，我想這就是你想要的

$(function() {
    $('#button').click(function(){
         $(".ul_menu").toggleClass('show');
        if( $(".ul_menu").hasClass('show')){
        $(".ul_menu").show("slide",{direction: 'left'});
        }else{
          $(".ul_menu").hide("slide",{direction: 'left'});
        }
    });
    $('#button').mouseleave(function(){
        if($(".ul_menu").hasClass('show')){
           $(".ul_menu").hide("slide",{direction: 'left'});
        }
    })
});