How do I make an image slide to the left when I hover on the image, and then after 1 second, the image slides back to the right?

Question

In this project, I wrote an animation.js file that will allow a new image to slide left and right when I hover over a certain image. My function will allow the new image to slide to the left, but when I want the image to slide back to the right, I have to move the cursor away from the image. However, I want the image to slide back to the right after 1 second of the image sliding to the left when hovering over the image. How do I do that?

This is what my code currently does to a webpage(these links are random examples found from the internet): http://static.buildinternet.com/live-tutorials/interactive-picture/index.html,

This is exactly what I want my code to do (this is my assignment): https://www.youtube.com/watch?v=cAMjrGbmlJg

Here is my animation.js file:

$(document).ready(function() {

    $('.listing_address').hover(function(){
        if ($(this).parent().is('.open')) {

            $(this).closest('.listing').find('.glass').fadeOut(500);
            $(this).closest('.listing').find('.house').animate({'left' : '25px'});
            $(this).closest('.listing').removeClass('open');

        }else{

            $(this).closest('.listing').find('.glass').fadeIn(500);
            $(this).closest('.listing').find('.house').animate({'left' : '10px'});
            $(this).closest('.listing').addClass('open');

        }

    });


});

Here is my listing.css file:

@charset "UTF-8";

body {font-family: Helvetica, Arial, sans-serif; }
p { margin: 0px; }
a { color: #bf572c; }
a:hover { color: #000; }

.house_images {
     float:left;
    }

.listing_container {
    margin: 20px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    width: 700px;
    background: url(../images/corkboard_tile.jpg) 0px 0px;
}

.listing {
    margin: 0px 15px 35px 15px;
    padding: 35px 15px 15px 70px;
    position: relative;
    background: #fff url(../images/note_top.jpg) no-repeat 0px 0px;
}

.listing_address { margin: 0px; padding: 0px 0px 5px 0px; display: inline-block; cursor: help; font-weight: bold; color: #1f4f71; }

.listing_detail_container { height: 0px; overflow: hidden; padding: 0px; color: #bf572c; }
.listing_detail { margin: 0px; padding: 0px; color: #bf572c; font-weight: normal; }

.listing .house { width: 40px; height: 50px; position: absolute; top: 20px; left: 25px; background: url(../images/house.png) 0px 0px; }
.listing .glass { width: 43px; height: 40px; position: absolute; top: 42px; left: 23px; background: url(../images/magnifier.png) 0px 0px; display: none;}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
        display: inline-block !important;
        text-align: left;
        width: 100%;
}
.main-navigation ul {
        margin: 0;
        text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
        display: inline-block;
        text-decoration: none;
}
.main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.6;
        text-transform: uppercase;
        white-space: nowrap;
}
.main-navigation li a:hover{
        color: #000;
}
.main-navigation li {
        margin: 0 30px 0 0;
        position: relative;
}



#hero {
    height:175px;
    width:960px;
}
#hero div {
    position:absolute;
    z-index: 0;
}
#hero div.previous {
    z-index: 1;
}
#hero div.current {
    z-index: 2;
}

Here is my sold.html file:



    
        
        Real Estate Sold
        
        
        
        
        
    
    


        
        
            
            
            
            
        




Home
Regional Info
Current Listings
Sold
About Us



    
                
                    Martin House Complex
                
                
                    
                        The Martin House Complex was built in 1905.
  The square footage is 14,978 sq. ft.  
                         
                        
                    
                
                

            


            
                
                    Robie House
                
                
                    
                        The Robie House was built in 1909.
  The square footage is 13,070 sq. ft.  

                        
                    
                
                

            


            
                
                    Taliesin
                
                
                    
                        The Taliesin House was built in 1911.
  The property sits on a 600 acre lot.  

                        
                    
                
                

            


            
                
                    Falling Water
                
                
                    
                        The Falling Water House was built in 1937.
  The property includes the main house, a four-bay carport, servants' quarters, and a guest house.

Mi-Creativity · Accepted Answer

Using jQuery animate() function you can specify a callback function as mentioned in the comments above, this function will be executed after the animation is complete, like this:

$( "#foo" ).animate({
    opacity: 1,
}, 1000, function() {
    // the callback function
    alert('Animation complete!');
});

UPDATE 1:

For your assignment, find this line in the else section:

$(this).closest('.listing').find('.house').animate({'left' : '10px'});

Now all you need is to add a callback function *after the closing } of your animate() function, like this:

$(this).closest('.listing').find('.house').animate({'left': '10px'}, function(){
    // this is the callback function 
    $(this).closest('.listing').find('.house').delay(1000).animate({'left': '25px'});
});

The callback function (the inner animate() function) will run immediately after the animation of the first animate() function ends, this why we added a delay of 1 second delay(1000) before it so it will wait for 1 second then it works

UPDATE 2

To make the .glass fade out too after 1 second just change this :

$(this).closest('.listing').find('.glass').fadeIn(500);

to this:

$(this).closest('.listing').find('.glass').fadeIn(500).delay(1000).fadeOut(500);

jsFiddle

How do I make an image slide to the left when I hover on the image, and then after 1 second, the image slides back to the right?

Answers (1)

Related Questions