Problem with Jquery UI Slide Left

Question

I’m developing a project and I needed to know how to slide a div to the left. I am currently using:

$('#idDiv').toggle('slide', { direction: 'left', distance: 450 });

I wanted mine to div of 500px width slide and let 50px on display. The problem is that when she has just given the slide of 450px she disappears. I know the toggle has to do with the hide and show, but is there another way (without using the animate to give resize) to give slide to the left without this disappears?

Here’s a example than I said.

Answer 1

The method .toggle() makes the div appear/disappear, it is better to use the method .animate() and encourage the margin-left for example. The width (width) could also be an alternative.

So in order to close and open again you can use one flag. A flag is a useful variable for knowing the state of the element.

In this case I use it to store information about whether it is open or closed. This flag in the first example is a global variable, in the second example is stored inside a field data of the element itself.

So every click he will check with a ternary operator if the flag open has the value true or false and as it returns "-250px" (case open for true) or "0px" (case open for false):

var open = true;
$(document).click(function () {
  $("#toggle").animate({
    'margin-left': open ? "-250px" : "0px"
  }, 500);
  open = !open;  // mudar a flag para o oposto do que estava usando o operador de negação "!"
});

Example

---

Another Alternative is to have a date field in the element that stores this flag about whether it is open or not:

HTML

<div id="toggle" data-open="true"></div>

JS

$(document).click(function () {
  var elemento = $("#toggle");
  elemento.animate({
    'margin-left': elemento.data('open') ? "-250px" : "0px"
  }, 500);

  // mudar a flag para o oposto do que estava usando o operador de negação "!"
  elemento.data('open', !elemento.data('open')); 
});

Example

---

The third example (and maybe better) is using a CSS class and transitions:

CSS

    #toggle {
        width: 300px;
        height:300px;
        background: #ccc;
        -webkit-transition: margin-left 500ms ease;
        -moz-transition: margin-left 500ms ease;
        -ms-transition: margin-left 500ms ease;
        -o-transition: margin-left 500ms ease;
        transition: margin-left 500ms ease;
    }
    .toggle {
        margin-left: -250px
    }

JS

    $(document).click(function() {
        var $toggle = $("#toggle");
        if ($toggle.hasClass('toggle')) $toggle.removeClass('toggle');
        else $toggle.addClass('toggle');
    });

Example

Answer 2

I’m not really into jQuery and I need to explain the code when doing my project presentation (PAP) and the way I managed to solve the problem was:

$(" #sideBarE ").click(function(e)
        {
            var divE = $('#empresas');
            var marginE = divE.css('margin-left');
            //alert(marginE);
            if (marginE == "0px")
                $('#empresas').animate({'margin-left':"-400px"}, 1000);
            else
                $('#empresas').animate({'margin-left':"0px"}, 1000);
            e.stopPropagation();
        });

Answer 3

You know you can do this with the translate in transitions and animations of css ??