当我将鼠标悬停在图像上时，如何使图像向左滑动，然后在 1 秒后，图像又滑回右侧？答案

【问题标题】：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?当我将鼠标悬停在图像上时，如何使图像向左滑动，然后在 1 秒后，图像又滑回右侧？
【发布时间】：2016-08-01 00:21:14
【问题描述】：

在这个项目中，我编写了一个 animation.js 文件，当我将鼠标悬停在某个图像上时，它将允许新图像左右滑动。我的功能将允许新图像向左滑动，但是当我希望图像向右滑动时，我必须将光标从图像上移开。但是，当悬停在图像上时，我希望图像在图像向左滑动 1 秒后滑回右侧。我该怎么做？

这是我的代码目前对网页所做的（这些链接是从互联网上找到的随机示例）： http://static.buildinternet.com/live-tutorials/interactive-picture/index.html,

这正是我希望我的代码做的事情（这是我的任务）： https://www.youtube.com/watch?v=cAMjrGbmlJg

这是我的 animation.js 文件：

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

        }

    });


});

这是我的listing.css文件：

@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;
}

这是我的 sold.html 文件：

<!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">
    <head>
        <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>
    </head>
    <body>

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

<nav class="main-navigation" role="navigation">
<div>
<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>
</ul></div>
</nav>

    <div class="listing">
                <div class="listing_address" id="martin">
                    <p>Martin House Complex</p>
                </div>
                <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>
                        </ul>
                    </div>
                </div>
                <div class="house"></div><div class="glass"></div>
            </div>


            <div class="listing" id="robie">
                <div class="listing_address">
                    <p>Robie House</p>
                </div>
                <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>
                </div>
                <div class="house"></div><div class="glass"></div>
            </div>


            <div class="listing">
                <div class="listing_address" id="Taliesin">
                    <p>Taliesin</p>
                </div>
                <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>
                </div>
                <div class="house"></div><div class="glass"></div>
            </div>


            <div class="listing">
                <div class="listing_address" id="water">
                    <p>Falling Water</p>
                </div>
                <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>
                </div>
                <div class="house"></div><div class="glass"></div>
            </div>  

        </div>


    </body>
</html>

【问题讨论】：

animate 有一个callback function，您可以在动画完成后使用它。然后你可以在那里放一些东西，比如setTimeout(function(){ $(this).closest('.listing').find('.house').animate({'right' : '25px'}); }, 1000)
@Quack 我应该把代码放在哪里。试了几个地方都不行？
您需要将回调添加到您的动画（如链接中）并将代码放在那里。
@Quack 我不知道将它放在我的 .js 文件中的哪个位置，你能用文本告诉我吗？我看到了这个例子，但它仍然没有帮助。
你可以只用 css 来做这个，但是因为这是一个作业，所以有必要使用 javascript/jquery 吗？

标签： javascript jquery html css image

【解决方案1】：

使用jQueryanimate()函数可以指定一个回调函数，如上面的cmets中提到的，这个函数会在动画完成后执行，像这样：

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

更新 1：

对于您的作业，请在 else 部分找到此行：

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

现在您只需在 animate() 函数的关闭 } 之后添加一个回调函数，如下所示：

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

回调函数（内部animate()函数）将在第一个animate()函数的动画结束后立即运行，这就是为什么我们添加了延迟1 第二个 delay(1000) 在它之前所以它会等待 1 第二个然后它工作

更新 2

要使 .glass 在 1 秒后也淡出，只需更改以下内容：

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

到这里：

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

jsFiddle

【讨论】：

感谢您的帮助！我的老师希望我只使用 .js 文件，所以我无法编辑其他任何内容。还有其他方法可以在我的 animation.js 上执行此操作吗？
行得通！非常感谢！我还有一个简短的问题。如何让图像在视频中一样在 1 秒后消失？
欢迎您，我很高兴它对您有所帮助，如果它回答了您的问题，您可以检查此答案是否正确