Question

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.

Answer 1

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);
});​