jQuery 使用jquery滑出div

Slide out div using jquery

提问by Kumaresh

Recently I found a solution to slide out div on click in stack overflow answers.

最近我找到了一个解决方案，可以在点击堆栈溢出答案时滑出 div 。

They posted the link jsfiddle.net/LU8En/.

他们发布了链接jsfiddle.net/LU8En/。

In the jsfiddle answer they used jquery 1.7.2. Its not working with jquery 1.9.1. I don't know the reason..? Any Idea..?

在 jsfiddle 答案中，他们使用了 jquery 1.7.2。它不适用于 jquery 1.9.1。我不知道原因..？任何的想法..？

回答by Anujith

Try this: Fiddle

试试这个： 小提琴

$(function () {
  $("#clickme").click(function () {
    if($(this).parent().css("right") == "-280px"){
    $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
  }
  else {
    $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
  }
  });
});

The .toggle(function, function, ... ) was removed from version 1.9

.toggle(function, function, ... ) 已从 1.9 版中删除

See the jQuery Core 1.9 Upgrade Guide

请参阅jQuery Core 1.9 升级指南

A better approach: Sample 2

更好的方法：示例 2

$(function () {
   $("#clickme").click(function () {
       if($(this).parent().hasClass("popped")){
       $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
   }else {
       $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
   });
});

回答by supersaiyan

Toggle function is remove from 1.9 jquery..

切换功能从 1.9 jquery 中删除..

You can try this :

你可以试试这个：

http://jsfiddle.net/LU8En/57/

http://jsfiddle.net/LU8En/57/

 var test= true;

    $("#clickme").click(function () {
        if(test){
        $(this).parent().parent().animate({left:'0px'}, {queue: false, duration: 500});
    }
                        else{
        $(this).parent().parent().animate({left:'-280px'}, {queue: false, duration: 500});                
        }      
       test= !test; 

回答by Mou

below sample can help u. thanks

下面的样本可以帮助你。谢谢

slide out from left

从左侧滑出

<div id="slideout">
    <div id="slidecontent">
        Yar, there be dragonns herre!
    </div>
    <div id="clickme">
    </div>
</div>

#slideout {
    background: #666;
    position: absolute;
    width: 300px;
    height: 80px;
    top: 45%;
    left:-280px;
}

#clickme {
    float: right;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
}

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({left:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({left:'-280px'}, {queue: false, duration: 500});
    });
});

slide out from Right

从右侧滑出

<div id="slideout">
    <div id="slidecontent">
        Yar, there be dragonns herre!
    </div>
    <div id="clickme">
    </div>
</div>

body {
    overflow-x: hidden;
}
#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    top: 45%;
    right:-280px;
    padding-left: 20px
}

#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
}

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

回答by M. Lak

Try this script, It helps to create slide out div for simple way

试试这个脚本，它有助于以简单的方式创建滑出 div

 <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab *required*
                 imageHeight: '122px',                               //height of tab image *required*
                 imageWidth: '40px',                               //width of tab image *required*    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '200px',                                   //position from the top
                 fixedPosition: true,                               //options: true makes it stick(fixed position) on scroll
                 onLoadSlideOut: true
             });
         });

         </script>
   <div class="slide-out-div"> 
        <a class="handle" href=""></a>
        <h3>San Web Corner</h3>
        <p>San Web Corner is one of the simple tutorial blog consist various tips and codes</p>
    </div>

Demo Here

演示在这里