What I am trying to do is when a image or div is clicked another div moves. The way I tried doing it was having a while loop that adds 5px to the left property of the div I want to move. The condition of the while statement would be false by default (and it needs to be true to do it) and when you click the image/div it becomes true and when you release the mouse it becomes false. I tried different ways to do this and none of them worked. Is a while loop the best way to do it?

Also would it be better to add to the left css property or animate the div 5px over to the right over and over (which I would think would be smoother)?

Note: On my site the arrows are the images that are clicked and the #thumbnails div is the one that needs to move.

Just noticed that the while loop does get activated but nothing happens on screen. The reason I think it gets activated is because a few seconds after clicking the image I get a message from my browser saying a script is causing it to run slow.

  • On my site I only added code to the rightmost arrow. Stephen Cronin over 7 years ago

4 answers


You'll want to use mousedown and mouseup events.

      // do stuff when click is released
      // do stuff when clicked
Answered over 7 years ago by Daryl Claudio
  • yeah I already know how to do that, what I need is the code that goes inside the mouseup and mousedown events that will move something until the user releases there mouse button Stephen Cronin over 7 years ago

Is jQuery UI's shake or the core's animate effect similar to what you're trying to achieve?? http://docs.jquery.com/UI/Effects/Shake


Answered over 7 years ago by Jim Schubert
  • not really, I'm looking to animate a div, but I already know how to do that. What I cant figure out is how to animate something while a button is being clicked, and then stop the animation once it is released. Its pretty much the same action as the up and down arrow for scrolling in the browser. Stephen Cronin over 7 years ago

Heres some code that doesnt work, but should explain what Im trying to accomplish:

    var scroll = false;
    var tnPos = 0;

    var scrollTN = function() {
        while (scroll) {
            tnPos = tnPos+1;
            $("#thumbnails").css("left", (tnPos+"px"));

    $("#rightButton").mousedown(function() {
        var scroll = true;

    $("#rightButton").mouseup(function() {
        scroll = false;
Answered over 7 years ago by Stephen Cronin
danwellman 5600

This tutorial describes a similar procedure for animating images in the way that you require and may help a little (tbh it may be overkill). There's a lot of other stuff about automatic scrolling, etc as well, but you can probably just ignore that stuff and look at how the arrows control the scrolling.

Personally I would always animate the left style property regardless of which direction the actual scrolling occurs in as you can animate the left positively or negatively to move right or left respectively

Answered over 7 years ago by danwellman