2

我是新来的。我正在使用一些基本的 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>
4

2 回答 2

2

不是：

$('#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/

于 2012-05-17T21:18:10.563 回答
0

我在想这是因为你向左移动 -3 向右移动 +3。您可以尝试向右移动-3。看看它是否有效。

于 2012-05-17T21:20:33.557 回答