CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Beginner
Beginner

Reputation: 55

JQuery - Right-bottom image not going up

Can somebody please help me as to getting the right-bottom image to go up when clicked the same way that the left bottom image does? This is really important to me. Thanks a lot to anyone who helps/answers/comments in advance.

$(document).ready(function() {
  $(document).on('click', '.left', function() {

    var $idl = $('.left').animate({
      'margin-top': '0',
      'width': '500'
    }, 650);

    var $idt = $('.top').animate({
      'margin-left': '253',
      'margin-top': '358',
      'width': '247'
    }, 650);

    var $idr = $('.right').animate({
      'margin-left': '0'
    }, 650);

    $(":animated").promise().done(function() {
      $idt.toggleClass('top right');
      $idl.toggleClass('left top');
      $idr.toggleClass('right left');
    });
  });
});
#img1 {
  position: absolute;
  width: 500px;
  height: auto;
}
.top,
.left,
.right {
  position: absolute;
  height: auto;
  margin-top: 1px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#img2 {
  margin-top: 358px;
  width: 247px;
}
#img3 {
  margin-top: 358px;
  margin-left: 253px;
  width: 247px;
}
#slider {
  width: 504px;
}
.right,
.left {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <img id="img1" class="top" draggable="false" src="http://dovyn.weissfamily.ca/Dovy/PR/1.jpg">
  <img id="img2" class="left" draggable="false" src="http://dovyn.weissfamily.ca/Dovy/PR/2.jpg">
  <img id="img3" class="right" draggable="false" src="http://dovyn.weissfamily.ca/Dovy/PR/3.jpg">
</div>

Upvotes: 0

Views: 41

Answers (2)

Sam
Sam

Reputation: 4484

You just need to add another click listener for .right and modify animations accordingly. I am assuming right -> top, top -> left, left -> right.

JSFiddle here

$(document).on('click', '.right', function() {

    var $idr = $('.right').animate({
      'margin-top': '0',
      'margin-left': '0',
      'width': '500'
    }, 650);

    var $idt = $('.top').animate({
      'margin-left': '0',
      'margin-top': '358',
      'width': '247'
    }, 650);

    var $idl = $('.left').animate({
      'margin-left': '253',
    }, 650);

    $(":animated").promise().done(function() {
      $idt.toggleClass('top left');
      $idl.toggleClass('left right');
      $idr.toggleClass('right top');
    });
});

Upvotes: 1

Billy
Billy

Reputation: 1043

All you need is just to copy the function for the left image, modify it a bit and make the function run on the right image. Check out the fiddle : http://jsfiddle.net/w2yhvka6/

And the code for the right image :

$(document).on('click', '.right', function() {

var $idl = $('.right').animate({
  'margin-top': '0',
  'margin-left': '0',
  'width': '500'
}, 650);

var $idt = $('.top').animate({
  'margin-left': '0',
  'margin-top': '358',
  'width': '247'
}, 650);

var $idr = $('.left').animate({
  'margin-left': '253'
}, 650);

$(":animated").promise().done(function() {
  $idt.toggleClass('top left');
  $idl.toggleClass('right top');
  $idr.toggleClass('right left');
});

});

Upvotes: 0

Related Questions