同時運行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