此代码不起作用// 如何让 div 在鼠标悬停时与其他 div 一起滑动 in-line？

Question

我知道有类似的讨论，我已经阅读、分析并在我的代码中尝试过。下面的代码是我目前拥有的，相信我，我花了一整天用尽所有方法来阻止我在这里问，但我放弃了！这是迄今为止最令人沮丧的目标。

我想要一个 header 带有一个小栏，当鼠标悬停在每个菜单项上方时，它会滑过。 http://www.wix.com/ 是我想要的一个完美示例。请访问并将鼠标移到导航栏上，您将立即了解我要实现的目标。

这是我当前的代码...

<!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>Untitled Document</title>
<style>
div {
    display: inline-block;
    float:left;
}
#red {
    background-color:#FF0000;
    height:100px;
    width:100px;
}

#blue {
    background-color:#0000FF;
    height:100px;
    width:200px;
}

#yellow {
    background-color:#E2BE22;
    height:100px;
    width:50px;
}

#green {
    background-color:#008800;
    height:100px;
    width:170px;
}
#slider{
    background-color:#6FF;
    height:10px;
    width:100px;
    position:relative;
}
</style>
</head>

<body>
<div id="slider"></div><br />
        <div id="red"></div>
        <div id="blue" onmouseover="javascript:movetoblue()" onmouseout="javascript:exitblue()"></div>
        <div id="yellow" onmouseover="javascript:movetoyellow()" onmouseout="javascript:exityellow()"></div>
        <div id="green" onmouseover="javascript:movetogreen()" onmouseout="javascript:exitgreen()"></div>
</body>
</html>
<script>
var slider = document.getElementById( 'slider' );

function movetoblue(){
        var slider = $("#slider");  
        slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitblue(){
        var slider = $("#slider");  
        slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetoyellow(){
        var slider = $("#slider");  
        slider.animate({left: '100px', width: '160px'}, "slow");
}
function exityellow(){
        var slider = $("#slider");  
        slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetogreen(){
        var slider = $("#slider");  
        slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitgreen(){
        var slider = $("#slider");  
        slider.animate({left: '7px', width: '200px'}, "slow");
}
</script>

我知道很多可能是错误的。叹。但任何帮助将不胜感激。谢谢:)

PS：我希望它能在 Chrome、IE、Safari 和 Firefox 上运行，但我主要关心的是 Chrome、IE、Safari。再次感谢！

Answer 1

正如我所见，您正在使用 jQuery，但使用的方式非常错误。我已经为你创建了一个 JSFiddle。看看 this

更新 1：

通过添加以下内容来编辑代码以获得更好的性能：

$("#slider").stop()

$(document).ready(function() {
  $("#slider").animate({
      "left": $(".item:first").position().left + "px",
      "width": $(".item:first").width() + "px"
    }, 0);
  
  $(".item").hover(function() {
    $("#slider").stop()
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });
});

div {
  display: inline-block;
  float: left;
}
#red {
  background-color: #FF0000;
  height: 100px;
  width: 100px;
}
#blue {
  background-color: #0000FF;
  height: 100px;
  width: 200px;
}
#yellow {
  background-color: #E2BE22;
  height: 100px;
  width: 50px;
}
#green {
  background-color: #008800;
  height: 100px;
  width: 170px;
}
#slider {
  background-color: #6FF;
  height: 10px;
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>

更新二：

要定义起始位置，您应该替换此部分：

$("#slider").animate({
      "left": $(".item:first").position().left + "px",
      "width": $(".item:first").width() + "px"
}, 0);

有了这个：

$("#slider").animate({
      "left": $("#TAG_ID").position().left + "px",
      "width": $("#TAG_ID").width() + "px"
}, 0);

注意 TAG_ID 是你的起始 div id 属性

更新 3：

如果用户没有select标签：

$("#slider").delay(3000).animate({
    "left": $(this).position().left + "px",
    "width": $(this).width() + "px"
}, 500);

此代码不起作用// 如何让 div 在鼠标悬停时与其他 div 一起滑动 in-line？

This code won't work// How to get the div to slide in-line with other divs on mouse over?

html

javascript

css

jquery

division