Question

我正在尝试点击图片并让它滑开，显示下面的另一个图像。在几秒钟的延迟后，我需要第一张图像在另一张图像上滑回。我不确定我的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”/＆gt ;

<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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

1 个答案: