鼠标悬停后 JQuery 将某些内容返回到原始位置时遇到问题
Posted
技术标签:
【中文标题】鼠标悬停后 JQuery 将某些内容返回到原始位置时遇到问题【英文标题】：Having trouble with JQuery returning something to it original position after mouseout 【发布时间】：2012-05-25 11:56:58 【问题描述】：我是新来的。我正在使用一些基本的 JQuery，但遇到了问题。您是否曾经在某个网站上看到其中一个框，您将鼠标悬停在它上面并且框中的箭头形状向左移动了几个像素，当您将鼠标移出时，它又返回了？无论如何，使用 iv 提供的代码，鼠标悬停效果正常，但鼠标移出不会将箭头返回到原始位置。实际上，您悬停的越多，箭头越左。
我敢打赌，你们中的许多人都看到了我想要的效果，但我觉得我没有以最好的方式设置它。有人可以帮忙吗？我自己做到了这一点。只是有点卡住了。
<!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>-</title>
<style type="text/css">
#red
height: 80px;
width: 200px;
background-color: #df0000;
float: left;
position: absolute;
z-index: 998;
display: none;
left: 0px;
top: 0px;
#gray
height: 80px;
width: 200px;
background-color: #232323;
float: left;
position: absolute;
z-index: 997;
left: 0px;
top: 0px;
#wording
height: 80px;
width: 200px;
float: left;
position: absolute;
z-index: 999;
left: 0px;
top: 0px;
background-image: url(getit.png);
background-repeat: no-repeat;
#wrap
height: 80px;
width: 200px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -40px;
margin-left: -100px;
#arrow
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
color: #df0000;
position: absolute;
top: 50%;
right: 15px;
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#wording').mouseenter(function()
$('#red').animate('width': 'toggle');
$('#arrow').css('color','white');
$('#arrow').delay(100).animate('left': '-=3px', "fast");
);
$('#wording').mouseleave(function()
$('#red').animate('width': 'toggle');
$('#arrow').css('color','red');
$('#arrow').delay(100).animate('right': '+=3px', 'fast');
);
);
</script>
</head>
<body>
<div id="wrap">
<div id="wording">
<div id="arrow">></div>
</div>
<div id="red"></div>
<div id="gray"></div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：不是：
$('#arrow').delay(100).animate('left': '-=3px', 'fast');
但是：
$('#arrow').delay(100).animate('right': '-=3px', 'fast');
你的脚本也可以是：
$(document).ready(function()
var $red = $('#red');
var $arrow = $('#arrow');
$('#wording').hover(
function()
$red.animate('width': 'toggle');
$arrow.css('color', 'white').delay(100).animate('right': '-=3px', "fast");
, function()
$red.animate('width': 'toggle');
$arrow.css('color', 'red').delay(100).animate('right': '+=3px', 'fast');
);
);
演示：http://jsfiddle.net/jqrET/1/
【讨论】：
非常感谢！我还在学习。这有助于我更好地理解谢谢！【参考方案2】：我在想这是因为你向左移动 -3 向右移动 +3。您可以尝试向右移动-3。看看它是否有效。
【讨论】：
伙计们，我实际上说得太早了。我试图做的是悬停它应该将红色背景滑入（效果很好），但直到箭头为止。鼠标悬停时，假设先向左移动 3 像素，然后返回向右 3 像素。鼠标移出对箭头没有任何影响，只需再次删除红色背景。希望这有意义吗？悬停会带出红色并将箭头向左移动 3 然后回到原来的位置。 这是我到目前为止的代码。找不到我的错误（它只是悬停效果。我还没有进行推出。悬停仍然一团糟。$（document）.ready（function（）var $red = $（'#red'）; var $arrow = $('#arrow'); $('#wording').mouseover( function() $arrow.css('color', 'white').delay(180).animate('right ': '+=3px', fast) (function() $arrow.css.delay(300).animate('right': '-=3px', 'fast') ); ); );以上是关于鼠标悬停后 JQuery 将某些内容返回到原始位置时遇到问题的主要内容，如果未能解决你的问题，请参考以下文章