Javascript 在鼠标移出后，JQuery将某些内容返回到其原始位置时遇到问题_Javascript_Jquery_Css_Jquery Animate_Slide

Javascript 在鼠标移出后，JQuery将某些内容返回到其原始位置时遇到问题

javascript jquery css

Javascript 在鼠标移出后，JQuery将某些内容返回到其原始位置时遇到问题,javascript,jquery,css,jquery-animate,slide,Javascript,Jquery,Css,Jquery Animate,Slide,我是新来的。我正在使用一些基本的JQuery，但遇到了一个问题。你有没有在网站上看到过这样一个框，当你将鼠标悬停在上面时，框中的箭头形状向左移动了几个像素，当你将鼠标移出时，它就会返回？好吧，不管怎样，随着代码iv的出现，鼠标悬停效果可以正常工作，但是鼠标悬停并没有将箭头返回到原始位置。实际上，你越悬停，箭头越向左我打赌你们中的许多人都看到了我想要的效果，但我有一种感觉，我并没有用最好的方式来设置它。有人能帮忙吗？我一个人走了这么远。只是有点卡住了 <!DOCTYPE html PUBL

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


-
#红色的{
高度：80px；
宽度：200px；
背景色：#df0000；
浮动：左；
位置：绝对位置；
z指数：998；
显示：无；
左：0px；
顶部：0px；
}
#灰色的{
高度：80px；
宽度：200px；
背景色：#232323；
浮动：左；
位置：绝对位置；
z指数：997；
左：0px；
顶部：0px；
}
#措辞{
高度：80px；
宽度：200px；
浮动：左；
位置：绝对位置；
z指数：999；
左：0px；
顶部：0px；
背景图片：url（getit.png）；
背景重复：无重复；
}
#包裹{
高度：80px；
宽度：200px；
左：50%；
最高：50%；
位置：绝对位置；
利润上限：-40px；
左边距：-100px；
}
#箭{
字体系列：Verdana，日内瓦，无衬线；
字体大小：24px；
颜色：#df0000；
位置：绝对位置；
最高：50%；
右：15px；
}
$（文档）.ready（函数（）{
$（“#措辞”）.mouseenter（函数（）{
$（'#红色'）。设置动画（{'width'：'toggle'}）；
$（'箭头'）.css（'颜色'，'白色'）；
$（'箭头'）.delay（100）.动画（{'left'：'-=3px'}，“fast”）；
});
$（“#措辞”）.mouseleave（函数（）{
$（'#红色'）。设置动画（{'width'：'toggle'}）；
$（'箭头'）.css（'颜色'，'红色'）；
$（'#arrow'）.delay（100）.动画（{'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');
     });
});

演示：

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

非常感谢你！我还在学习。这帮助我更好地理解了，谢谢！伙计们，我说得太快了。我想做的是在悬停状态下，它应该滑动红色背景（这很好），但尽可能远的箭头。在鼠标悬停时，它应该向左移动3px，然后再回到向右移动3px。鼠标移出对箭头没有任何影响，只需再次移除红色背景即可。这有意义吗？悬停会显示红色，并将箭头向左移动3，然后返回到原来的位置。这是我到目前为止的代码。找不到我的bug（这只是悬停效果。我还没有开始。悬停仍然很混乱。$（文档）。准备好（函数（）{var$red=$（'#red'）；var$arrow=$（'#arrow'）；$（'#wording'）。鼠标悬停（函数（）{$arrow.css（'color'，'white'）。延迟（180）。动画（{'right'：'+=3px'），fast）（函数（）{$arrow.css.delay（300）.animate（{'right'：'-=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');
     });
});