如何在jquery中移动div元素

时间:2014-03-11 22:46:39

标签: javascript jquery html css web

所以基本上我有一个这样的菜单:[家,项目,声音,联系人],菜单顶部有一个小圆圈。所以我想要的是,当我点击一个菜单项时,小圆圈移动到该项目(在它上面)。

这样的事情: enter image description here

到目前为止,这是我的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 */

示例将不胜感激,万分感谢!

3 个答案:

答案 0 :(得分: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');
 });

答案 1 :(得分:0)

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

在菜单项的click事件中,获取事件的目标(event.target,其中event是函数中的参数)。现在将以下值添加到现有位置:[target&#39; s position()。left + target&#39; s width()/ 2],您将获得新的位置。

注意:如果菜单项有填充/边距,请使用jQuery的outerWidth()而不是width()。看起来有。

答案 2 :(得分:0)

快速而肮脏的答案

  1. 添加一个班级来管理这个小圈子。
  2. 当您选择菜单对象时,选择将此类添加到其中并将其隐藏在上一个菜单中(您需要将变量存储在上一个菜单中...或者您可以检查哪个未被选中并且使用此类)
  3. 并且您已设置