滑入和滑出图像 [英] Slide In and Slide Out images

问题描述

我正在尝试实现一种平滑效果，即当一个图像滑出时，另一图像滑入.此动画需要这样一种方式:当一个物体滑出时，另一物体滑入时，它们都需要同时增加div内部的空间.

I am trying to achieve a smooth effect where, while one image is sliding out, another slides in. This animation needs to be in a way that while one thing is sliding out the other one is sliding in such that they both take up space inside the div at the same time.

类似于此或我创建了一个简单的jsFiddle ，描述了他所面临的问题.

I created a simple jsFiddle, describing the problem that he faced.

    $("#googleLogo").hide("slide", {
        direction: "right"
    }, 500 );
    $("#yahooLogo").show("slide", {
        direction: "left"
    }, 500 );

在开始将另一件事滑进去之前，我基本上是在滑溜一件事.我认为我在某个地方犯了一个愚蠢的错误.

I am basically sliding one thing out just before I start sliding the other one in. I think I am making a silly mistake somewhere.

推荐答案

这取决于您的标记和样式结构:

That depends on your markup and style structure:

#imageSliding {
   position:relative;
   height:100px;
}
#imageSliding img {
   position:absolute;
   left:0;
   top:0;
}
#yahooLogo {
  display:none;
}

这篇关于滑入和滑出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！