Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you want animation instead of just positioning, then use <strong><code>.animate()</code> instead of <code>.css()</code></strong>, like this:</p> <pre><code>function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) { TheSelector.animate({ top: SomeTopValue, left: SomeLeftValue width: SomeWidthValue, height: SomeHeightValue}, 500); } </code></pre> <p>and then to use it, since you seem to be doing this type of changes a lot, you call it lke this, using selector caching:</p> <pre><code>TheSelector = $(this); //or TheSelector = $('#mainbox1'); or another element TheTop = 721 - ((190 - 60) / 2); TheLeft = 206 - ((190 - 60) / 2); TheHeight = 190; TheWidth = 190; AnimatePosition(TheSelector, TheTop, TheLeft, TheWidth, TheHeight); </code></pre> <p>Just a suggestion that can help: <strong>chain and cache your selectors!</strong></p> <p>When you write something like this: </p> <pre><code>$('#mainbox').hide(); $('#mainbox').css('top', '440px'); $('#mainbox').css('left', '200px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); </code></pre> <p>you can write this:</p> <p><code>var mainbox = $('#mainbox');</code> or <code>var This = $(this);</code> so that you don't have to reevaluate <code>$('#mainbox')</code> or <code>$(this)</code> every line. In fact, in your case, you should use chaining and write this (note that <code>.css()</code> can also take an object):</p> <pre><code>$('#mainbox').hide() .css({'top': '440px', 'left': '200px', 'z-index': '' }) .show(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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