你如何在jquery中移动一个div元素答案

【问题标题】：How do you move a div element in jquery你如何在jquery中移动一个div元素
【发布时间】：2014-03-11 22:46:39
【问题描述】：

所以基本上我有一个这样的菜单：[家庭、项目、声音、联系人]，菜单顶部有一个小圆圈。所以我希望当我点击一个菜单项时，小圆圈会移动到该项目（在它的顶部）。

所以是这样的：

到目前为止，这是我的 jquery：

$(document).ready(function(){
  var position = 80;
    $('.navP').click(function(){
        // change all to black, then change the one I clicked to red     
       $('#indicatorBar').animate({'margin-left':'+='+position+'px'}, 1000);
       $('.navP').css('color', 'white');
        $(this).css('color', 'red');
    });

});

我的html：

<div class ="menuContainer">

    <span id="indicatorBar">
            <i class="icon-circle"></i>
        </span>

<a class="nameBanner"  href="#mainPage"> Ipalibo Whyte</a>

<ul>

    <li><a class="navP" href="#mainPage">Home</a></li>
    <li><a class="navP" href="#projectContents">Projects</a></li>
    <li><a class="navP" href="#musicContent">Sounds</a></li>
    <li><a class="navP" href="#contactContent">Contact me</a></li>

</ul>

</div>

CSS：

#indicatorBar{
  top: 0px;
  right: 60px;
  font-size: 7px;
  color: #B4FF47;

}

.menuContainer{
    position: fixed;

    width: 100%;
    top: 0%;
    left: 0%;
    bottom: 92%;
    opacity: 0.7;
  z-index:9;
  background: #16161F;

   animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

示例将不胜感激，谢谢一百万！

【问题讨论】：

它现在做什么？它有动画或移动吗？你能发一个小提琴吗？
您已硬编码该职位。您想使用 jQuery position() 函数来确定当前元素的位置。像var position = $(this).position().left; 这样的东西会让你得到被点击的元素的左边缘。获取元素的宽度，除以二，添加到左边，就可以了。
@zero298 当你点击任何按钮时它只会向左移动 LOL 如此多的点击可以将圆圈完全移出你得到的屏幕？

标签： javascript jquery html css web

【解决方案1】：

这是一个基于您提供的代码的快速演示：http://jsfiddle.net/k7ypa/

基本上，我只是获取被点击元素的位置。

JavaScript：

 $('.navP').click(function () {
     // move dot
     var position = $(this).position().left + $(this).width()/2 - 5;
     $('#indicatorBar').animate({
         'margin-left': position + 'px'
     }, 1000);
     // change all to black, then change the one I clicked to red
     $('.navP').css('color', 'white');
     $(this).css('color', 'red');
 });

【讨论】：

【解决方案2】：

我建议你对#indicatorBar 使用绝对定位。

在菜单项的点击事件中，获取事件的目标（event.target，其中event是函数中的参数）。现在将值添加到现有位置：[target's position().left + target's width() / 2]，您将获得新位置。

注意：如果菜单项有填充/边距，请使用 jQuery 的 outerWidth() 而不是 width()。好像有。

【讨论】：

【解决方案3】：

一个快速而肮脏的答案是

添加一个班级来管理这个小圈子。
当你的菜单对象被选中时，添加这个类并将它从前一个菜单中隐藏（你需要将前一个菜单存储在一个变量中......或者你可以检查哪个没有被选中并使用这个类)

你准备好了

【讨论】：