CODEWITHSUNDEEP
jqueryhtmlimageslide
Billie C
Billie C

Reputation: 11

i need an image to slide left and show another image underneath then slide back into place after a few seconds

I am trying to click on an image and have it slide away showing another image underneath. after a few second delay I need the first image to slide back over the other image. I'm not sure my html has correct id's.

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 for one requirement that works, however I need the second image not to show until the first image is clicked on. )

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

Upvotes: 0

Views: 199

Answers (1)

Shammel Lee
Shammel Lee

Reputation: 4475

Run this bad boy…

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

Upvotes: 1

Related Questions