Using Jquery how can I refresh a CSS transition effect with one click?

Question

Here is my code thus far:

$(document).ready(function(){
  $(".KD").click(function(){
    $("p").load('KD.html');
    $(".video").load('KDVideo.html');
    $(".synopsis-change").toggleClass("synopsis");
    $(".synopsis").toggleClass("synopsis-change");
  });
});

It seems to work with multiple clicks, but I'm having trouble getting it to work with only one. Do u know what am I doing wrong? Thank you for your support. :-)

Here is the css:

synopsis  {
font-size: 2px;
-webkit-transition: font-size 10s ease; 
}
.synopsis-change {
font-size: 18px;    
}

Why would you toggle a class, just to immediately toggle it again? I don't follow what you are trying to accomplish. Can you be more specific, and explain the problem you are having more thoroughly? — Brad
– Brad, Commented Feb 26, 2012 at 6:30
I'm trying to use the same CSS transition for multiple classes and even multiple times for the same class, so I figured I'd have to reset that transition after using it each time. — Squirrl
– Squirrl, Commented Feb 26, 2012 at 6:38
I still don't understand what you are trying to do. What do you mean by "transition"? What are you transitioning to/from? What are you trying to do? — Brad
– Brad, Commented Feb 26, 2012 at 6:40
Basically with a click, I'm trying to fill a box with text and transition the letters from small letters to larger ones over time. I had success doing this by toggling two classes but I'm having trouble doing it over and over again. Maybe I'm using a totally wrong approach? Thanks for your help. — Squirrl
– Squirrl, Commented Feb 26, 2012 at 6:48

Chamika Sandamal · Accepted Answer · 2012-02-26 07:15:17Z

1

add extra class to set the animation, http://jsfiddle.net/2Lf3D/

<span class="KD">click to start animation</span>
<div class="synopsis font-animation">****</div>

.synopsis  {
font-size: 2px;
}
.synopsis-change {
font-size: 18px;    
}
.font-animation{
-webkit-transition: font-size 1s ease; 
}

$(".KD").click(function() {
    $(".font-animation").toggleClass("synopsis").toggleClass("synopsis-change");    
});

answered Feb 26, 2012 at 7:15

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chamika Sandamal Over a year ago

it would be better if down voter can justify the reason for the down-vote.

biphobe · Accepted Answer · 2012-02-26 07:22:33Z

I don't really know what are you trying to accomplish, but here's the tip.

The timing may be an issue there. The code is being executed from top to bottom, but it's possible that these 2 commands are overlapping since they are really simple and are executed nearly in the same time.

Try this:

$(document).ready(function(){
$(".KD").click(function(){
    $("p").load('KD.html');
    $(".video").load('KDVideo.html');
    $(".synopsis-change").toggleClass("synopsis");
    $(".synopsis").toggleClass("synopsis-change").delay(100);
  });
});

Or this:

$(document).ready(function(){
$(".KD").click(function(){
    $("p").load('KD.html');
    $(".video").load('KDVideo.html');
    $(".synopsis-change").toggleClass("synopsis");

    setTimeout(function(){
        $(".synopsis").toggleClass("synopsis-change");
    },100);
  });
});

... to delay changing the second class and see if it works.

Collectives™ on Stack Overflow

Using Jquery how can I refresh a CSS transition effect with one click?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related