在这个项目中，我编写了一个animation.js文件，当我将鼠标悬停在某个图像上时，它将允许新图像左右滑动。我的功能将允许新图像向左滑动，但是当我希望图像向右滑动时，必须将光标移离图像。但是，当鼠标悬停在图像上时，我希望图像在向左滑动1秒后向右滑动。我只想更改animation.js文件，而不是其他文件。我怎么做？
这是我的代码当前对网页所做的操作（这些链接是从互联网上找到的随机示例）：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>
您可以这样使用mouseenter/mouseleave：
$('.listing_address').hover(function() { //Mouse Enter
var listing = $(this).closest('.listing');
listing.find('.glass').fadeOut(500);
listing.find('.house').animate({
'left': '25px'
});
listing.removeClass('open');
}, function() { //Mouse Leave
var listing = $(this).closest('.listing');
listing.find('.glass').fadeIn(500);
listing.find('.house').animate({
'left': '10px'
});
listing.addClass('open');
});
或更紧凑的版本：
$('.listing_address').hover(function(ev) {
var mouEnt = ev.type === "mouseenter",
listing = $(this).closest('.listing');
listing.find('.glass').fadeToggle(500);
listing.find('.house').animate({left: mouEnt ? 25 : 10});
listing.toggleClass('open');
});
我希望这能帮到您。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句