CODEWITHSUNDEEP
jqueryjquery-ui
Sourabh
Sourabh

Reputation: 1765

Running jquery slider simultaneously

here is my simple jquery ui code with html.

$(document).ready(function(){
    $("img").click(function () {
          $(this).hide("slide", { direction: "left" }, 1000); 
          $(this).show("slide", { direction: "right" }, 1000); 
    });
});

here goes html

<img src="images/logo.png"/>

The image is being hidden and then coming back, I want this thing be be simultaneous.

Note: you might suggest some similar questions, I check some of them out and none worked for me. Looking for a simple solution.

Upvotes: 1

Views: 308

Answers (2)

Juris Vaiders
Juris Vaiders

Reputation: 635

This is just an example and needs adjustments but I think you can get the idea.

HTML

<img id="img1" src="image1.jpg">
<img id="img2" src="image2.jpg">

CSS

img{
  width:250px;
  height:200px;
  position: absolute;
}
#img1{
  left:0;
}
#img2{
  left:250px;
}

Javascript

$("#img1").click(function() { 
   $("#img1").animate({left: '-250px'},2000); 
   $("#img2").animate({left: '0'},2000); 
});

Example ​

Upvotes: 0

John Koerner
John Koerner

Reputation: 38079

It might not be the cleanest approach, but you could just clone the item and then animate the cloned item:

$("img").click(function() {
    var x = $(this).clone(true);

    $("body").append(x);

    $(this).hide("slide", {direction: "left"}, 1000, function() {
        $(this).remove();
    });
    x.show("slide", {direction: "right"}, 1000);
});​

Upvotes: 1

Related Questions