jQuery切换水平动画答案

【问题标题】：jQuery toggle horizontal animatejQuery切换水平动画
【发布时间】：2012-06-23 18:35:53
【问题描述】：

我是新来的，所以我希望我做得对。

我目前正在开发一个简单的 jQuery 功能，其中我有不同的选项卡可以水平打开。问题是我无法切换它。

我使用了一个叫做可见的变量；这取决于元素的状态是真还是假。这对于一个元素来说效果很好，但是如果我想打开两个元素，我必须双击以首先将值设为 false，然后它才会运行。

你们中的任何人都可以为此提供更好的解决方案吗？

   <script type="text/javascript"> 
    var visible=0;
    function getClickedId(clicked_id) {
        var selectedId = clicked_id;
        $(document).ready(function () {

            if (visible ==0) {
                  $('[name='+selectedId+']').animate({width: 300}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 325}, "slow");
                   visible=1;
            } else {
                  $('[name='+selectedId+']').animate({width: 0}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 25}, "slow");
                  visible=0;
            }
        });
    }
    </script>

（对不起，如果我的代码嵌入不正确）

【问题讨论】：

bootstrap 的人使用data-toggle / data-target 属性有一个非常巧妙的方法来执行此操作。它可能有点先进，但值得一看。 demo, source.
谢谢，我会调查的：）

标签： jquery jquery-animate

【解决方案1】：

尝试：

<script type="text/javascript"> 
var visible=0;
function getClickedId(clicked_id) {
    var selectedId = clicked_id;
    if (visible == 0) {
          $('[name='+selectedId+']').animate({width: 300}, "slow");
          $('#Wrapper'+selectedId).animate({width: 325}, "slow");
          visible=1;
    } else {
          $('[name='+selectedId+']').animate({width: 0}, "slow");
          $('#Wrapper'+selectedId).animate({width: 25}, "slow");
          visible=0;
    }
 }
</script>

【讨论】：

这部分工作，但我无法关闭打开的元素，因为即使可见等于 1，您提供的打开功能的解决方案也会运行。
@user1477205 我没听懂，什么意思
我看到你在我回复后编辑了代码。但是删除“文档准备好”没有用。

【解决方案2】：

$(document).ready(function () {
    var visible=true;
    function getClickedId(clicked_id) {   
        $('[name="'+clicked_id+'"]').animate({width: visible ? 300 : 0}, "slow");
        $('#Wrapper'+clicked_id).animate({width: visible ? 325 : 25}, "slow");
        visible=!visible;
    }
});

FIDDLE

【讨论】：