Bootstrap 3 and jquery conflict

1

Using bootstrap 4
https://jsfiddle.net/s9zk62m8/6/

Using bootstrap 3
https://jsfiddle.net/kq7Ltq0y/

Both codes in the link are the same except using different bootstrap versions

as you can see, the code using bootstrap 4 run perfectly while the code using bootstrap 3 run very buggy

is there any ways to fix the code that using bootstrap 3 without changing the version?

Thank

2

For your BS3 version, try this code. This works.
I removed the callback, and just called loop() within itself.
Also, since you’re saving to a variable the DOM for class progress-bar, I just used that variable in the animate.

$(document).ready(function() {
	function loop() {
        var p = $(".progress-bar");
        var pause = 650;
        
        p.animate({'width': '0px'}, 400).delay(pause).animate({'width': '50%'}, 400).delay(pause);
        loop();
    }
        
    loop();
});

I added a .delay to give enough time for the animation to complete, before running the next chained method.

3

Thank a lot!! It works!!

So it seems like the past code animation look weird because both the width:0px and width:50% animations were happening on the same time?

I still have a little confuses on how did the animation kept increasing and going to the right side of the bar?

4

I viewed the console and watched the values… somehow, the calculations were off… after a few minutes, the width reached ridiculous high numbers… in the exponent range. like 3.27343 E3 %

I think the problem with the BS3 version was without the delay(), the browser couldn’t really show the width animation progressing. All you see are just random “snapshots” of the animation. Then on the next loop, it takes those as the initial values (or something like that) and then a percentage applied again, the width just went higher and higher.

If you change the delay numbers and make it lower, you’ll see what I mean. The animation becomes choppy… as if not all the keyframes are being shown. So I had to slow it down with the delay() command.

I have to admit… this was a very unusual problem. We just have to find some workarounds.

5

Got it, and once again, thank you :smiley: