39

I found following code in multiple places to slide left/right:

$('#hello').hide('slide', {direction: 'left'}, 1000);

However, i can't get it working. Here is minimalistic test which I am trying:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function() {
        $("#test").click(function() {
            $('#hello').hide('slide', {direction: 'left'}, 1000);
        });
    });
   </script>
</head>
<body>
    <article >
        <div id="hello">
            Hello       
        </div>
        <p><span id="test">Test</span>
    </arcticle>
</body>

I tried it in Chrome and Safari and it doesn't work.

What is the problem? Are there other working methods to slide left/right?

1

4 Answers 4

69

You can easy get that effect without using jQueryUI, for example:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

Try this working Fiddle:

http://jsfiddle.net/ZQTFq/

1
  • 4
    I don't think this is the cleanest way to do this but t worked like a charm. However, I needed to set overflow-x: hidden; Jul 10, 2013 at 12:54
61

$('#hello').hide('slide', {direction: 'left'}, 1000); requires the jQuery-ui library. See http://www.jqueryui.com

0
5

The easiest way to do so is using jQuery and animate.css animation library.

Javascript

/* --- Show DIV --- */
$( '.example' ).removeClass( 'fadeOutRight' ).show().addClass( 'fadeInRight' );

/* --- Hide DIV --- */
$( '.example' ).removeClass( 'fadeInRight' ).addClass( 'fadeOutRight' );


HTML

<div class="example">Some text over here.</div>


Easy enough to implement. Just don't forget to include the animate.css file in the header :)

1
  • Bravo! Animate.css along with JQuery is a super clean and simple way of animating.
    – xarlymg89
    Oct 14, 2018 at 9:05
1

$(document).ready(function(){
$("#left").on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $('#left').hide("slide", { direction: "left" }, 500, function () {
            $('#right').show("slide", { direction: "right" }, 500);
        });
    });
    $("#right").on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $('#right').hide("slide", { direction: "right" }, 500, function () {
            $('#left').show("slide", { direction: "left" }, 500);
        });
    });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div style="height:100%;width:100%;background:cyan" id="left">
<h1>Hello im going left to hide and will comeback from left to show</h1>
</div>
<div style="height:100%;width:100%;background:blue;display:none" id="right">
<h1>Hello im coming from right to sho and will go back to right to hide</h1>
</div>

$("#btnOpenEditing").off('click');
$("#btnOpenEditing").on('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#mappingModel').hide("slide", { direction: "right" }, 500, function () {
        $('#fsEditWindow').show("slide", { direction: "left" }, 500);
    });
});

It will work like charm take a look at the demo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.