jquery - 同时运行 jquery 滑块

Question

这是我的带有 html 的简单 jquery ui 代码。

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

例子 ​</p>