Databases
StackOverflow2013
Postsdbo
POI have a simple image picture slider with JQuery, but I do not know how to animate up or down
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI have a simple image picture slider with JQuery, but I do not know how to animate up or down
    text
    copied!<p><img src="https://i.stack.imgur.com/10MIG.png" alt="This is I coded by js and jQuery"></p> <p>I just want the up and down button at the right side of the picture slider work. Currently, my js code is:</p> <pre><code> var height_value = 104 * (-1)*3; var top_value=0; $("#photoViewerCont .nextPage").click(function(){ alert("here"); top_value=top_value+height_value; $("#photoViewer .thumbs .pages").animate({'top' : height_value}, 1000,function(){ $("#photoViewer .thumbs .pages").css({'top' : top_value}); }); return false; }); </code></pre> <p>The HTML part of this js:</p> <pre><code>&lt;div id="photoViewer" class="stackItem"&gt; &lt;div id="photoViewerCont"&gt; &lt;div id="mainPhoto" class="preview"&gt; &lt;div class="innerCont"&gt; &lt;a onclick="return false;" rel="photos" data-id="113195895" href="#"&gt; &lt;img width="456" height="342" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" data-index="0" src="1.jpg"&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="thumbs"&gt; &lt;div class="innerCont"&gt; &lt;div class="paginated"&gt; &lt;div class="pages" style="height: 634px; top: 0px;"&gt; &lt;div class="page"&gt; &lt;div class="thumb" id="defaultpic"&gt; &lt;img class="thumb_0" width="120" height="90" data-type="main_photo" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" src="1.jpg"&gt; &lt;/div&gt; &lt;div class="thumb"&gt; &lt;img class="thumb_1" width="120" height="90" data-type="photo" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" src="2.jpg"&gt; &lt;/div&gt; &lt;div class="thumb"&gt; &lt;img class="thumb_2" width="120" height="90" data-type="photo" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" src="3.jpg"&gt; &lt;/div&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="page"&gt; &lt;div class="thumb"&gt; &lt;img class="thumb_3" width="120" height="90" data-type="photo" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" src="4.jpg"&gt; &lt;/div&gt; &lt;div class="thumb"&gt; &lt;img class="thumb_4" width="120" height="90" title="112 Cattai Ridge Road, Glenorie, NSW 2157" alt="112 Cattai Ridge Road, Glenorie, NSW 2157" src="5.jpg"&gt; &lt;/div&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class="previousPage" href="#"&gt;Previous&lt;/a&gt; &lt;a class="nextPage" href="#"&gt;Next&lt;/a&gt; &lt;/div&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>the css part of this file:</p> <pre><code>#photoViewer .thumbs { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #CCCCCC #CCCCCC #CCCCCC -moz-use-text-color; border-image: none; border-style: solid solid solid none; border-width: 1px 1px 1px 0; float: right; width: 165px; } .thumbs { position: relative; } #photoViewerCont .innerCont { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #FFFFFF; height: 346px; padding: 12px; } #photoViewer .thumbs .paginated { height: 312px; margin: 0 auto; position: relative; top: 18px; width: 130px; overflow: hidden; } #photoViewerCont a.previousPage { border-radius: 0 0 3px 3px; top: -1px; overflow: hidden; position: absolute; text-indent: 5000px; } #photoViewerCont a.nextPage { background-position: -57px 0; border-radius: 3px 3px 0 0; bottom: -1px; overflow: hidden; position: absolute; text-indent: 5000px; } #photoViewerCont a.previousPage, #photoViewerCont a.nextPage { background: url("photoviewer_arrows.png") no-repeat scroll -3px 0 #C20014; border: 1px solid #AAAAAA; display: inline-block; height: 24px; right: 61px; width: 48px; } #photoViewerCont a.nextPage { background-position: -57px 0; border: 1px solid #AAAAAA; display: inline-block; height: 24px; right: 61px; width: 48px; } </code></pre> <p>It can go to the alert part, but the animate part seems doesn't work. Can anyone know where my wrong or can give me a simple example of how picture slide gliding and rising. </p>
 

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