Michael Bao Michael Bao - 1 year ago 85
HTML Question

How do you make an image move left and right when you hover your cursor over it?

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. I only want to change the animation.js file, not the other files. 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() {

if ($(this).parent().is('.open')) {

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


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




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 {

.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 {
#hero div {
z-index: 0;
#hero div.previous {
z-index: 1;
#hero div.current {
z-index: 2;

Here is my sold.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Real Estate Sold</title>
<link rel="stylesheet" type="text/css" href="includes/listing.css" />
<script type="text/javascript" src="includes/jquery-1.6.min.js"></script>
<script src="includes/"></script>
<script type="text/javascript" src="includes/listing.js"></script>
<script src = "animation.js"></script>

<div class="listing_container">
<div class="header"><img src="images/header.jpg" width="750" height="150"></div>
<div id="hero">
<div class="current"><img src="images/landscape1.jpg" alt="landscape" width="700" height="175" /></div>
<div><img src="images/landscape2.jpg" alt="landscape" width="700" height="175" ></div>
<div><img src="images/landscape3.jpg" alt="landscape" width="700" height="175" ></div>
<div><img src="images/landscape4.jpg" alt="landscape" width="700" height="175" ></div>

<nav class="main-navigation" role="navigation">
<ul id="menu-main-menu" class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Regional Info</a></li>
<li><a href="index.html">Current Listings</a></li>
<li><a href="#">Sold</a></li>
<li><a href="index.html">About Us</a></li>

<div class="listing">
<div class="listing_address" id="martin">
<p>Martin House Complex</p>
<div class="listing_detail_container" >
<div class="listing_detail" id = "martin_detail">
<ul><li>The Martin House Complex was built in 1905.</li><li> The square footage is 14,978 sq. ft. </li></ul>
<p> <a href="images/martin1.jpg" ><img src="images/martin_ext.jpg" alt="martin" /></a></p>
<div class="house"></div><div class="glass"></div>

<div class="listing" id="robie">
<div class="listing_address">
<p>Robie House</p>
<div class="listing_detail_container">
<div class="listing_detail">
<ul><li>The Robie House was built in 1909.</li><li> The square footage is 13,070 sq. ft. </li></ul>

<p><img src="images/robie_ext.jpg"></p>
<div class="house"></div><div class="glass"></div>

<div class="listing">
<div class="listing_address" id="Taliesin">
<div class="listing_detail_container">
<div class="listing_detail">
<ul><li>The Taliesin House was built in 1911.</li><li> The property sits on a 600 acre lot. </li></ul>

<p><img src="images/taliesin_ext.jpg"></p>
<div class="house"></div><div class="glass"></div>

<div class="listing">
<div class="listing_address" id="water">
<p>Falling Water</p>
<div class="listing_detail_container">
<div class="listing_detail">
<ul><li>The Falling Water House was built in 1937.</li><li> The property includes the main house, a four-bay carport, servants' quarters, and a guest house. </li></ul>
<p><img src="images/water_ext.jpg"></p>

<div class="house"></div><div class="glass"></div>



Answer Source

You can use mouseenter/mouseleave like this:

$('.listing_address').hover(function() { //Mouse Enter
    var listing = $(this).closest('.listing');
        'left': '25px'
}, function() { //Mouse Leave
    var listing = $(this).closest('.listing');
        'left': '10px'

or a more compact version:

$('.listing_address').hover(function(ev) { 
    var mouEnt = ev.type === "mouseenter",
        listing = $(this).closest('.listing');
    listing.find('.house').animate({left: mouEnt ? 25 : 10});

I hope this will help you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download