jQuery Toggle Animation

Asked

Viewed 680 times

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, this deviates to the left while the #admin > form, #btn slideup and go back to the original position (css) when #admin > form, #btn slide down again.

Here is my odious poop:

$('#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

  • Miguel, can you add your HTML to make it clearer? (or even make it jsFIddle)

  • You want one to appear the other to disappear, and vice versa?

  • Here is jsFiddle. Note: I don’t know what’s going on but in my browser it works. The '#admin > p' goes left but what I wanted is to turn dps to the original position qd the 'form' is Hidden. Obgado I put this code because at least it works once, I am sure you understand what I mean. Obgado http://jsfiddle.net/dW6Mb/

2 answers

1


Here is 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 does toggle form '#admin > form and also the element #btn that is within the form and therefore included in the slideToggle(). If he doesn’t have to, he can wear 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();
    })
})

Example

  • Miguel, I also recommend you take a look at my answer here: http://answall.com/questions/7388/problema-com-jquery-ui-slide-left

  • Obgado Rgio. As for the #btn being in the form and so having to slide the form I agree and that’s what I did at the beginning but it wasn’t showing up on the slide show, and I had to put it with an id and display:None in css just so it worked, I don’t notice either. Obgado

  • @Miguel I’m glad my answer helped. By the way, display: none; at the button is not required, you can remove: http://jsfiddle.net/vU53x/3/

0

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

http://jsfiddle.net/dW6Mb/6/

  • Obgado Moykn, but I don’t know why your code was ok in jsfiddle but I couldn’t implement it in mine

  • If you just copied the code (javascript) and played it on your page really won’t work, I made some changes to html tbm.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.