Toggle animation on click of div?

Question

please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/

In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.

$('#one').mouseenter(function(){
    $('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
        $("#refresh-1").show();
    })
});

$('#refresh-1').click(function(){
    $('.alt0').width(0);
    $(this).hide();
})

$('#one').mouseleave(function(){
    $('.alt0').stop()
}); 

Answer 1

1. First change mouseenter to mouse click

   $('#one').mouseenter(function() → $('#one').click(function()

2. Enter some variable that will change on every click:

    var oneIsPlayed = false $('#one').click(function() { oneIsPlayed = !oneIsPlayed; if ( oneIsPlayed ) { //code to stop } else { //code to start animation } }) 

Answer 2

Breaking down the code:

$('#one').mouseenter(function(){
  $('.alt0').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-1").show();
 })});

This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:

$('#one').click(function(){
  $('.alt0').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-1").show();
 })});

You can do the same with the stop animation component:

$('#one').click(function(){
 $('.alt0').stop()
});

If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:

eg

$('#two').click(function(){
  $('.alt1').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-2").show();
  $('.alt0').stop();
 })});

It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.

Answer 3

On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.

$(document).ready(function () {

        $('#service').click(function () {
            $("#ServiceSublist").animate({opacity: 0.25,
            left: "+=50",
            height: "toggle"
        }, 1000, function() {
            alert("amination complete");
        });
        });

    });

Answer 4

Try

$('#one').on('click', function () { //when first is clicked
    $('.alt1').stop();  //stop second animation
    $('#two').removeClass('active'); //remove seconds active class

    if ($(this).hasClass('active')) { //check if clicked item has active class
        $('.alt0').stop(); //stop animation
        $(this).removeClass('active'); //remove active class

    } else { //if not active or animating

        $(this).addClass('active'); //add active class
        $('.alt0').animate({ //start animation
            width: $(this).width()
        }, ($(this).width()) / 2 * 1000, "linear", function () {
            $("#refresh-1").show();
        });
    }

});


$('#refresh-1').click(function () {
    $('.alt0').width(0);
    $(this).hide();
})

Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar

just remove the part from code

 $('.alt1').stop();  //stop second animation
 $('#two').removeClass('active'); 

 $('.alt0').stop();  //stop firstanimation
 $('#one').removeClass('active'); 

Full example http://jsbin.com/UseTIji/1/