Databases
StackOverflow2013
Postsdbo
PObuggy JQuery .animation()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObuggy JQuery .animation()
    text
    copied!<p>here i have 6 divs (.sticker) inside a single div, <strong>onClicking</strong> one of them i would like to <strong>fadeOut</strong> the others keeping the clicked one in it position (that's why i do the <em>postop</em>/posleft thing) then i want to move it on the middle of the bigger div while it grows by height and width, showing a hided div (.info). The same for closing! So, this code it's working but it's really laggy, it's not smooth as jQuery should be, am i doing something wrong?</p> <p>Thanks to all the comunity!</p> <pre><code>$("body").on('click', '.sticker', function () { if (!is_open) { postop = $(this).position().top; posleft = $(this).position().left; $('.sticker').not(this).fadeOut(350, function () { $(".sticker").css("position", "absolute").css("left", posleft + "px").css("top", postop + "px"); $(".sticker").animate({ 'top': '0px', 'left': '300px', 'height': '480px', 'width': '750px', 'left': '90px' }, 350); $(".sticker").children(".wrap").animate({ 'height': '343px', 'width': '750px' }, 350); $(".sticker").find(".imgspace").animate({ 'height': '343px', 'width': '750px' }, 350); $(".sticker").find(".info").animate({ 'height': '100px' }, 350); $('.arrow-left').animate({ 'left': '-20px' }, 450); $('.arrow-right').animate({ 'left': '880px' }, 450); is_open = true; }); } if (is_open) { $(".sticker").children(".wrap").animate({ 'height': '193px', 'width': '300px' }, 350); $(".sticker").find(".imgspace").animate({ 'height': '193px', 'width': '300px' }, 350); $(".sticker").find(".info").animate({ 'height': '0px' }, 350); $(".sticker").animate({ 'height': '230px', 'width': '300px', 'top': postop, 'left': posleft }, 350, function () { $(".sticker").css("position", "static"); $(".sticker").not(this).fadeIn(300); is_open = false; }); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload