jquery photo slide

I have an image, when i hover on it i am able开发者_StackOverflow to view left and right arrows... when i click an arrow i am changing the source attr of the image using jquery... so i am successful in changing the images on clicking the arrows.. what i want is, how do i get the slide show feel... the animation pat where the current image slides right and a new image slides in from left when left arrow is clicked... please help me with this... i dont want to use the already existing plugins... Thanks in advance...

---

To do this I would have two blocks, one for the old image and one for the new (both with overflow-hidden).

Starting positions:

  old - normal
  new - right margin = width of image

On animation tick e.g. every 0.05 secs

  old - left margin+1
  new right margin-1

Until the old has slid out and the new has slid in.

---

I would suggest that you use JQuery's animate features. Look at http://api.jquery.com/animate/ for more information.

---

this is a custom animation work done please find the fiddle

    $('.arrowRight').on('click', function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var prevLandscape = currLandscape.prevAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var prevDesc= currDesc.prevAll(".hiddenDesc").first();

    if (prevLandscape.length == 0) {
        prevLandscape = currLandscape.siblings('.hiddenImg').last();
    }
    if (prevDesc.length == 0) {
        prevDesc= currDesc.siblings('.hiddenDesc').last();
    }

    prevLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    prevLandscape.removeClass('hiddenImg').addClass('currImg');
});


$('.arrowLeft').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "left" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});