Question

最近，我找到了一个解决方案，可以在stack overflow answers点击时滑出div。

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

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

Answer 1

试试这个：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});
  }
  });
});

.toggle（函数，函数，...）已从版本1.9中删除

请参阅jQuery Core 1.9 Upgrade Guide

更好的方法：Sample 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>

Demo Here

使用jquery滑出div

4 个答案:

从左侧滑出

从右边滑出