Problem with Jquery UI Slide Left

Navigation
4

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

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

I wanted my div of 500px width to slide and leave 50px displayed. The problem is that when she has just given the 450px slide she disappears. I know that toggle has to do with hide and show , but is there another way (without using animate to resize) to slide left without it disappearing? p>

Here's a example than said.

    
asked by anonymous 26.02.2014 / 12:41

3 answers

3

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

So to be able to close and reopen you can use flag . A flag is a useful variable to know 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 it is stored within a% field of% of the element itself.

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

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 holds this flag over 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 (and perhaps better) example is using a class and CSS 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

    
26.02.2014 / 12:48
1

I'm not really into jQuery and I need to explain the code when submitting my project (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();
        });
    
26.02.2014 / 13:08
0

Do you know what you can do with translate in transitions and animations of css?

    
26.02.2014 / 14:32
Basic competition in Erlang Maven - Configuring MainClass