jQuery Toggle animation

Question

jQuery Toggle animation

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm trying to make an animation that behaves like a toggle. What I want is that with the click event on #admin > p , it deflects to the left while the #admin > form, #btn slideUp returns to the original position (css) when #admin > form, #btn does slide down again.

Here is my code:

$('#admin > p').click(function(){
    $('#admin > form, #btn').stop(true).slideToggle();
})

$('#admin > p').toggle(function() {
    $(this).animate({'left':'20px'});
}, function() {
    $(this).animate({'right':'20px'});
});

javascript jquery

asked by anonymous 26.02.2014 / 20:08

2 answers

0

You can do this by using classes to check the state of the form. I made some changes to the fiddle you sent.

link

26.02.2014 / 20:51

After doing insert, redirect to the listing of records in Kohana Problem with friendly url

score 1 · Accepted Answer

Here's a suggestion:

$(document).ready(function () {
    var aberto = $('#btn').is(':visible');  // verificar se #btn está visivel guardando o estado como true / false
    $('#admin > p').click(function () {
        $(this).animate({
            'right': aberto ? '20px' : '150px', // no caso de aberto se true usar '20px', no caso de aberto ser false usar '150px'
        });
        aberto = !aberto;
        $('#admin > form, #btn').stop(true).slideToggle();
    })
})

Example

I'm not sure why toggle the form '#admin > form and also the #btn element that is within the form and therefore included in the slideToggle() . If it is not accurate, you can also use it like this:

$(document).ready(function () {
    $('#admin > p').click(function () {
        var $adminForm = $('#admin > form');  // isto até poderia estar fora da função click caso seja usado noutras partes do código
        $(this).animate({
            'right': $adminForm.is(':visible') ? '20px' : '150px',
        });
        $adminForm.stop(true).slideToggle();
    })
})