2012-02-02 108 views
3

我有7个按钮。它们分布在背景图像的顶部并与其进行交互。他们绝对放置。我创建了一个jQuery函数来为其中一个按钮高度设置动画。按钮向上扩展。点击这里查看:http://hdpano.no/bf/newindex.html并点击左上角的按钮8。一个功能来规则多个按钮,然后一些

我希望这个函数能够处理所有的按钮,但是有一些变量。每个按钮的基线都不相同,并且我需要在扩展高度时从中减去它。如果点击另一个按钮,我也希望关闭任何其他打开的按钮。

这里是jQuery代码:

jQuery(document).ready(function() { 

$('#link8').toggle(
function() 
{ 
    $('#deck8').animate({height: "25px",top:"202"}, 500); 
}, 
function() 
{ 
$('#deck8').animate({height: "150",top:"76"}, 500); 

}); 

}); 

功能是很基本的,我已经剥夺我所有的努力,使之与其他按钮的工作吧。

回答

2

这就是你要找的。在此您的网页代码替换...

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('.link').click(function() { 
      var $me = $(this); 
      if ($me.height() == 150) { 
       $me.animate({height: "25px",top:"+=126"}, 500); 
      } else { 
       $(".link").each(function() { 
        if ($(this) != $me) { 
         if ($(this).height() == 150) { 
          $(this).animate({height: "25px",top:"+=126"}, 500); 
         } 
        } 
       }); 
       $me.animate({height: "150px",top:"-=126"}, 500); 
      } 
     }); 
    }); 
</script> 

您可以切换与位置+ =和 - =所以它使用了相对定位,而不是绝对定位,因此代码会影响页面上的所有的div与类“链接”。

+0

谢谢。现在我走在正确的轨道上! – Studiostefan 2012-02-02 11:40:54

+1

我刚刚在重读您的问题后进行了更改。当您打开新的按钮时,它现在会关闭打开的按钮。 – Archer 2012-02-02 11:44:09

+0

我使用了这段代码。非常感谢你。我也尝试添加一些背景动画。 $(this).animate({“backgroundColor”:“rgba(203,54,191,。4)“},500) 但它不起作用,任何提示?或者我应该打开一个新的线程? – Studiostefan 2012-02-02 18:25:31

0

你想要做的是为每个按钮添加一个类,例如.deck,然后切换.deck'. Inside the toggle function use $(this)`来引用当前按钮。

2

this在切换功能将是被点击的元素。

这里是我会做什么:

  • 删除<br/>标签。使用边距/填充来实现间距。

  • 基本上你想展开/折叠包含<ul>的高度的元素“.link”(容器)。

  • 使用“+ =”或“ - =”与animate函数自动添加/删除指定的值。

  • 为您的按钮启动倒塌,你应该反转两种功能的切换

这里一个代码,就比较一般了:

jQuery(document).ready(function() { 

    // on click of any link with class ".linkContent" 
    $('.linkContent').toggle(
    function() { 
      // get the parent ".link" container 
     var $parent = $(this).parent(), 
      // get the full height of the <ul> to show/hide + the height of the link 
      h = $parent.find('ul').outerHeight() + $(this).outerHeight(); 

     // animate using += and -= to avoid setting explicit values 
     $parent.animate({ height: '+=' + h, top: '-=' + h }, 500); 
    }, 
    function() { 
     var $parent = $(this).parent(), 
      h = $parent.find('ul').outerHeight() + $(this).outerHeight(); 
     $parent.animate({ height: '-=' + h, top: '+=' + h }, 500); 
    }); 

}); 

下面的演示显示了该代码在行动中。您可能需要调整它一点得到确切的高度,以添加/删除,但你的想法:

DEMO

+0

非常感谢你,我尝试了.parent,但从来没有按照我想要的方式工作,这看起来很棒,我会尽量实现它,然后我会D – Studiostefan 2012-02-02 11:39:00

+1

我已经改变了一下代码:颠倒了两个切换函数(当按钮开始折叠)和计算'h'。检查更新的提琴 – 2012-02-02 11:51:34

+0

你已经完成了我原本做了什么,并且在打开新的按钮时错过了关闭任何打开的按钮的位置。 – Archer 2012-02-02 12:18:38

相关问题