Запуск слайдера jquery одновременно

Question

вот мой простой код jquery ui с html.

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

здесь идет HTML

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

Изображение прячась, а затем возвращаться, я хочу эту вещь быть одновременными.

Примечание: вы можете предложить несколько похожих вопросов, я проверю некоторые из них, и никто не работал для меня. Ищете простое решение.

Answer 1

Это может быть не самый чистым подходом, но вы можете просто клонировать элемент, а затем анимировать клонированный элемент:

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

Answer 2

Это просто пример, и нуждается в корректировках, но я думаю, что вы можете получить эту идею.

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