jQuery切換水平動畫

我在這裏是新的，所以我希望我做這個權利。jQuery切換水平動畫

我目前正在開發一個簡單的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>

（很抱歉，如果我的代碼嵌入是不正確的）

來源

2012-06-23 Kugie

[引導]（HTTP：//嘰嘰喳喳.github.com/bootstrap /）使用'data-toggle' /'data-target'屬性可以很好地實現這一點。這可能有點高級，但值得一看。 [demo]（http://twitter.github.com/bootstrap/javascript.html#collapse），[source]（http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js）。 – RichardTowers

謝謝，我會研究它:) – Kugie

嘗試：

<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>

來源

2012-06-23 18:38:20 mgraph

這部分工作，但是我不能關閉打開的元素，因爲即使可見等於1，您提供的打開功能的解決方案也將運行。 – Kugie

@ user1477205我沒有明白，你是什麼意思 – mgraph

我看到你編輯了我的代碼後的代碼。但刪除「文檔準備」沒有工作。 – Kugie

$(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

來源

2012-06-23 18:50:59 adeneo

jQuery切換水平動畫

回答

相關問題