jquery - 使用jquery滑出div

Question

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

他们张贴了链接jsfiddle.net/LU8En/。

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

Answer 1

试试这个： 小提琴

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

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

请参阅jQuery Core 1.9 升级指南

更好的方法：示例 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");}
   });
});

Answer 2

切换功能已从 1.9 jquery 中删除。

你可以试试这个：

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; 

Answer 3

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

从左侧滑出

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

从右侧滑出

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

Answer 4

试试这个脚本，它有助于以简单的方式创建滑出 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>