jQuery using button to slide

Question

I need to have a div on the right side of the screen which slides to a bigger size and stops. this of course towards the left of the screen. Afterwards I need to be able to click on the same div again so it gets back smaller. I should be able to do this infinitely.

Right now I'm able to get the div bigger and smaller but it doesn't stop. So I just get an animation but the content of the div flashes by...

$(document).ready(function() {



$("#clickdiv").click(function () {            

$("#clickdiv").animate({'width': 2129},800);

});

$("#clickdiv").click(function(){
$(this).animate({'width': 36},800);
});


});

Answer 1

Try something like this,

$(document).ready(function() {
    var i=0;
    $("#clickdiv").click(function() {
        i=i===2129?36:2129;
        $(this).animate({width:i}, 800);
    });
});

FIDDLE

There is no need of two listener only need is to toggle the width.

Answer 2

Do not use two click listeners, use one and check which animation should happen.

var large = false;
$("#clickdiv").click(function () {
    if(large = !large) {
        $(this).animate({'width': 2129}, 800);
    } else {
        $(this).animate({'width': 36}, 800);
    }
});

And here is a fiddle.

Answer 3

You could give a try to the translateZ transform css rule, something like :

.your_div_class_to_get_bigger {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
  transition: all ease-in-out .150s;
}

Then you have to addClass('#your_div_id', your_div_class_to_get_bigger) in your onClick (and consider using .on('click') instead), and removeClass(...) on second click :

('#your_div_id').on('click', function() {
  if($(this).hasClass('your_div_class_to_get_bigger')) {
    $(this).removeClass('your_div_class_to_get_bigger');
  } else {
    $(this).addClass('your_div_class_to_get_bigger');
  }
});

You'll have to adjust some other CSS I think.

An example I made with this : http://www.antee-formation.com (the frontpage slider, on hover not on click).

Good luck with it

Answer 4

TL;DR version (a fiddle for you if you don't like to read explanations).

Problem

The problem with your code is that you attach 2 different event handlers to the same click event and they bot run on every click. If I merge your event handlers, the problem becomes more evident:

$("#clickdiv").click(function () {            
    $("#clickdiv").animate({'width': 2129},800);
    $(this).animate({'width': 36},800);
});

On every click you animate to 2129 width and animate back to 36 width. This is clearly not what you want to do.

You need to somehow check the current state (is the <div> currently wide or narrow?), and do something accordingly.

Solution

An elegant way of toggling the style of something with jQuery is .toggleClass(). This checks if a class on an element exists, and adds and removes it accordingly.

First you have to set up the css styles, for example:

#clickdiv {
    width: 36px;
}

#clickdiv.longer {
    width: 2129px;
}

You can then call:

$('#clickdiv').click(function () {
    $(this).toggleClass('longer');
});

Of course adding a class does not animate by default, but this can be solved by enabling CSS3 transitions:

#clickdiv {
    transition: all ease-in-out .5s;
}

This solution is very clean. Minimal plumbing code and CSS3 transitions are nice to look at.

As an alternative to CSS3, you could use the jQuery UI .toggleClass(), which has parameters to enable animation. This requires you to also include jQuery UI, and modify the JS code like this:

$('#clickdiv').on('click', function () {
    $('#clickdiv').toggleClass('longer', 500);
});

Notice the new last parameter of toggleClass().

The CSS transitions can be tested here.

The jQuery UI version can be tested here.