我需要一张图片向左滑动并在下面显示另一张图片，然后几秒钟后滑回原位答案

【问题标题】：i need an image to slide left and show another image underneath then slide back into place after a few seconds我需要一张图片向左滑动并在下面显示另一张图片，然后几秒钟后滑回原位
【发布时间】：2017-11-09 09:54:24
【问题描述】：

我试图点击一张图片，让它滑开，在下面显示另一张图片。几秒钟的延迟后，我需要将第一张图像滑回另一张图像上。我不确定我的 html 是否有正确的 id。

CSS

.dr {
align-content: center;
}

.container {
width: 960px;
margin: 20px auto;
}

.contentl {
float: left;
width: 480px;
margin: 10px;
padding: 10px;
}

.contentr {
float: left;
width: 480px;
margin: 10px;
padding: 10px;
}

（对于一个可行的要求的 JS，但是我需要在单击第一张图片之前不显示第二张图片。）

 <script> 
$(document).ready(function(){

    $('img').load(function() {
        $(this).data('height', this.height);
    }).bind('mouseenter mouseleave', function(e) {
        $(this).stop().animate({
            height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 
: 1)
        });
    });


});
</script>


<body>

<h1>Guessing Game</h1>

<div id="container">

<div id="contentl">
<p id="dr" align="center">
<img id="i1"

src="file:///C:/Users/billi/Google%20Drive/School/INMD215/assignments/week%206/Media/gg%20media/door1.jpg" alt="Door One"/>

<div id="contentr">
<p id="dr" align="center">
<img id="i1" src="file:///C:/Users/billi/Google%20Drive/School/INMD215/assignments/week%206/Media/gg%20media/door2.jpg" alt="Door Two"/>
<img id="i2" src="file:///C:/Users/billi/Google%20Drive/School/INMD215/assignments/week%206/Media/gg%20media/pog.png" alt="pot of gold"/>
    </p>
    </div>

</div>

</body>

【问题讨论】：

你说你想点击图片但你正在使用mouseenter和mouseleave事件
它显示的功能也是一个要求，以便一个工作。我添加了您的代码，现在所有三个要求都有效！你摇滚！
好的，我看错了要求。 sooo .. 只有在顶部图像滑到一边后，bottom_image 才需要淡入视野？
没有汗水。马上来！
@shammel lee 这太棒了，但第二张照片淡出而不是淡入。我尝试使用它并查找它，但我做不到。

标签： jquery html image slide

【解决方案1】：

运行这个坏男孩......

$(function(){
  $('.top_image').click(function(event){
    var $top_image = $(this);
    var $bottom_image = $('.bottom_image');

    $top_image.animate({
      left: '-150px'
    },function(){
      window.setTimeout(function(){
        $top_image.animate({left: '0px'});
      },2500); // wait 2.5 seconds before sliding back
    });

    $bottom_image.animate({opacity: 1}, 1000);
});
});

.image_container{position:relative; width:150px; height:100px;margin:auto}
img{display:block; position:absolute}
.top_image{cursor:pointer}
.bottom_image{opacity:0}

<!DOCTYPE html>
<body>
<div class='image_container'>
  <img class='bottom_image' src='http://68.media.tumblr.com/a203e3d842f73161fbf13318a08d69ad/tumblr_nrxh7u6nwX1ts2l6wo1_250.jpg' width='150'/>
  <img class='top_image' src='https://www.pets4homes.co.uk/images/classifieds/2016/09/26/1403628/large/smooth-haired-miniature-dapple-dachshund-57ea690ac071a.jpg' width='150' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>

【讨论】：