|
Page 1 of 1 |
|
Posted: Tue, 31st Mar 2015 14:29 Post subject: Jumpy container on first click |
|
 |
http://stackoverflow.com/questions/29368397/jump-animation-on-first-click-normal-on-second
I have a 'featured gallery' element. When you click on the image you get all the info stored in data attributes in another div that should expand underneath the image you've clicked on. The problem is that when I click the first time, the window just jumps open (my guess is that it has to do with the fact that I'm detaching the div and attaching it to the correct row).
If you close it, and open it again, the animation is nice and smooth.
Any idea why is this happening?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 02:29 Post subject: |
|
 |
Last edited by Interinactive on Tue, 5th Oct 2021 01:04; edited 1 time in total
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 03:11 Post subject: |
|
 |
I answered your question dingo, but honestly, that is one terrible solution dude
Some tips:
There is no need to set a timeout to run an action after a jQuery animate is complete. That is what callbacks are used for:
previously
Code: | $(document).on('click', '#close_wrapper', function(e) {
e.preventDefault();
$loaded_content.animate({
height: 0}, 500, "linear")
setTimeout(function(){
$loaded_content.hide()
}, 500);
$('#pointer').hide();
}); |
afterwards:
Code: | $('#close_wrapper').on('click', function() {
$loaded_content.animate({height: 0}, 500, "linear", function(){
$loaded_content.hide();
$('#pointer').hide();
});
}); |
$(document).on('click')
^^ is terrible if you don't do it on purpose. Every single click on your page will be registered by jQuery and then a check will be done if the clicked element somehow matches your css selector.
Instead you should attach the event registration ONLY on your target element. (by doing detachments and other silly stuff with your dom, you can break even handling though! Don't fuck with your dom if you attached events!)
$(...).animate has a callback function
animate({what}, howlong, how, function(){thisShouldHappenWhenTheAnimationIsOver});
and much more 
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 09:14 Post subject: |
|
 |
That code was a leftover when I used AJAX to pull the info from the post into the container (and that just took too long, so we dropped the AJAX and decided to use data-* instead). Then the close wrapper wasn't in the document, untilthe AJAX call, so I had to do it like this. I'll fix it.
Now that I look at the code, it's too big and clunky, and I should do half of the transitions with css instead.
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 10:20 Post subject: |
|
 |
Sorry for being cranky, it was very late yester... uh... today 
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 12:19 Post subject: |
|
 |
Crancky? Didn't notice really
Any time I can learn how to code better (by someone pointing out the flaws) is a good thing 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 14:49 Post subject: |
|
 |
unrelated to actual question, the given $this=$(this) tip is very worthwhile
creating a jquery object every single time is super expensive
if fiddling with dom in a loop, cache the jq object outside the loop function
|
|
Back to top |
|
 |
|
Posted: Wed, 1st Apr 2015 15:06 Post subject: |
|
 |
shole wrote: | unrelated to actual question, the given $this=$(this) tip is very worthwhile
creating a jquery object every single time is super expensive
if fiddling with dom in a loop, cache the jq object outside the loop function | Then give me a thumbs up on stack 
|
|
Back to top |
|
 |
|
Posted: Fri, 3rd Apr 2015 09:52 Post subject: |
|
 |
I've created a git https://github.com/dingo-d/featured-portfolio
I added slideToggle, that seems to be working the best, and I've floated the elements, and now the transitions is great. The only thing that is not that great is that I need to make it so, that when I have opened an image, when I click on other image, they'll load in the container without closing it.
Now it just toggles the slide.
How should I fix this? Add a class, and then check if it has a class and toggle the slide, and if it doesn't have a class not toggle it? Any tip?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Fri, 3rd Apr 2015 09:58 Post subject: |
|
 |
Only call the slide toggle to close when you click on the same element again.
|
|
Back to top |
|
 |
|
Posted: Fri, 3rd Apr 2015 12:16 Post subject: |
|
 |
How do detect if I have clicked on the same element? With event.target?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Thu, 16th Apr 2015 10:07 Post subject: |
|
 |
Ok I've fixed it, and it works great (especially on wordpress theme I'm working on atm )
https://github.com/dingo-d/featured-portfolio
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|