当前位置: 动力学知识库 > 问答 > 编程问答 >

Slide out div using jquery

问题描述:

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

They posted the link 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..?

网友答案:

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

See the jQuery Core 1.9 Upgrade Guide

A better approach: 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");}
   });
});
网友答案:

Toggle function is remove from 1.9 jquery..

You can try this :

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; 
网友答案:

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});
    });
});
网友答案:

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

 <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

分享给朋友:
您可能感兴趣的文章:
随机阅读: