滑入和滑出图像

问题描述

我正在尝试实现一种平滑效果，即当一个图像滑出时，另一图像滑入.此动画需要这样一种方式:当一个物体滑出时，另一物体滑入时，它们都需要同时增加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;
}

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