在这个项目中，我编写了一个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>
答案 0 :(得分：2)
您可以像这样使用mouseenter/mouseleave：
E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.omitted, PID: 2236
java.lang.NullPointerException
at butterknife.ButterKnife.findById(ButterKnife.java:343)
at com.omitted.LogFragment.reset(LogFragment.java:156)
at com.omitted.LogPresenter.reset(LogPresenter.java:35)
at com.omitted.CalculatorModel.doReset(CalculatorModel.java:251)
at com.omitted.CalculatorPresenter.onResetClicked(CalculatorPresenter.java:107)
at com.omitted.CalculatorFragment.reset(CalculatorFragment.java:130)
at com.omitted.CalculatorFragment.onCreateView(CalculatorFragment.java:97)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:1974)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1252)
at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:742)
at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1617)
at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:570)
at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:141)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1177)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1025)
at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1545)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.support.design.widget.CoordinatorLayout.onMeasureChild(CoordinatorLayout.java:668)
at android.support.design.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:735)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2291)
at android.view.View.measure(View.java:16497)
at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916)
at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5670)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761)
at android.view.Choreographer.doCallbacks(Choreographer.java:574)
at android.view.Choreographer.doFrame(Choreographer.java:544)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:136)
t android.app.ActivityThE/AndroidRuntime: FATAL EXCEPTION: main
ess: com.omitted, PID: 2236
.lang.NullPointerException
at butterknife.ButterKnife.findById(ButterKnife.java:343)
at com.omitted.LogFragment.reset(LogFragment.java:156)
at com.omitted.LogPresenter.reset(LogPresenter.java:35)
at com.omitted.CalculatorModel.doReset(CalculatorModel.java:251)
at com.omitted.CalculatorPresenter.onResetClicked(CalculatorPresenter.java:107)
at com.omitted.CalculatorFragment.reset(CalculatorFragment.java:130)
at com.omitted.CalculatorFragment.onCreateView(CalculatorFragment.java:97)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:1974)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1252)
at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:742)
at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1617)
at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:570)
at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:141)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1177)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1025)
at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1545)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.support.design.widget.CoordinatorLayout.onMeasureChild(CoordinatorLayout.java:668)
at android.support.design.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:735)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
at android.view.View.measure(View.java:16497)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2291)
at android.view.View.measure(View.java:16497)
at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916)
at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5670)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761)
at android.view.Choreographer.doCallbacks(Choreographer.java:574)
at android.view.Choreographer.doFrame(Choreographer.java:544)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityTh
或更紧凑的版本：
$('.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');
});
我希望这会对你有所帮助。