使用.animate（）

Question

遇到了一些問題我在嘗試切換多個項目時遇到了一些麻煩。

這裏是我想要實現摘要：

• 有5個格（我們姑且稱之爲 觸發-DIV），並有5周其他 的div與每個 觸發格對應（姑且稱之爲 內容DIV）
• 當我點擊扳機DIV1，這是 相應內容DIV1會彈出 了.animate（）
• 當我點擊另一個觸發DIV2， 打開的content-div1將在關閉後關閉 ，其中包含.animate（）切換寬度和 ， 對應的content-div2將以.animate（）打開 。
• 與其他觸發器一樣。例如，當我點擊trigger-div3時，content-div2將關閉，content-div3將在後面打開。

下面的代碼我到目前爲止

<script> 
$(document).ready(function() { 
var div_id; 
var tile_object; 
var ele_about = 0; 
var ele_career = 0; 
var ele_restaurant = 0; 
var ele_contact = 0; 
var ele_blog = 0; 

var toggle_check = function (tile_object, div_id) { 
if (ele_about == 1){ 
animate_close("ele_about", tile_object, div_id, "#tile-blog"); 
} 
else if (ele_career==1){ 
animate_close("ele_career", tile_object, div_id, "#tile-career-content"); 
} 
else if (ele_restaurant==1){ 
animate_close("ele_restaurant", tile_object, div_id, "#tile-restaurant-content"); 
} 
else if (ele_contact==1){ 
animate_close("ele_contact", tile_object, div_id, "#tile-contact-content"); 
} 
else if (ele_blog==1){ 
animate_close("ele_blog", tile_object, div_id, "#tile-blog"); 
} 
else { 
animate_open(tile_object, div_id); 

} 
} 

var animate_close = function (tile_close, tile_open, div_id, div_close){ 
$(div_close).animate({ 
width: "toggle", 
}, 600, "linear", function(){ animate_open(tile_object, div_id); } 
); 

tile_close = 0; 
} 

var animate_open = function (tile_object, div_id) { 
$(div_id).animate({ 
width: "toggle", 
}, 600); 

tile_object = 1; 
alert(ele_about) 
} 

$("#tile-about").click(function(){ 
toggle_check(ele_about, "#tile-blog"); 
}); 

$("#tile-career").click(function(){ 
toggle_check("ele_career", "#tile-career-content"); 
}); 

$("#tile-restaurant").click(function(){ 
toggle_check("ele_restaurant", "#tile-restaurant-content"); 
}); 
}); </script> 

而這裏的HTML

<a id="trigger-about" href="#"><div id="tile-about" class="tile-about-inactive"></div></a> 
<div id="tile-career" class="tile-career-inactive"></div> 
<div id="tile-restaurant" class="tile-restaurant-inactive"></div><div id="tile-contact" class="tile-contact-inactive"></div> 

<div id="tile-blog" class="div-hide"> 
blog content 
</div> 

<div id="tile-about-content" class="div-hide"> 
career content 
</div> 

<div id="tile-career-content" class="div-hide"> 
career content 
</div> 

<div id="tile-restaurant-content" class="div-hide"> 
restaurant content 
</div> 

<div id="tile-contact-content" class="div-hide"> 
contact content 
</div> 

「分區隱藏」類只是一個「顯示：無」 CSS來隱藏內容最初和「瓷磚 - 積極」是爲了我的懸停效果，這很好。

運行此操作後，出於某種原因，「ele_」變量不會轉換爲「toggle_check（）」和「animate_open（）」函數。我注意到這一點，因爲警報（ele_about）一直返回0值。

請幫忙！我被難住了:(

Answer 1

你需要做的是將所有的觸發器div與一個類，所有的內容div與另一個類組合在一起，但也給他們所有的ID。應其相應的觸發div的數據屬性打開，然後點擊任何觸發格時，你可以簡單地這樣做：

$(".trigger-divs").click(function() { 
var contentDiv = $("div#"+$(this).attr('data')); 
$(".content-divs :visible").hide();//hide visible content div; 
contentDiv.slideDown();//fadeIn, animate({width: '600px'}) whatever you want 
}) 

注：我使用的訪問數據ATTR，一個是因爲它是硬編碼的，而b，因爲在jQuery 1.4和1.6封裝使用$ .data方法存儲的數據方面存在差異

Answer 2

這不太合適，因爲我需要.con帳篷divs動畫時關閉，而不是隱藏它。

我張貼這種jQuery的論壇以及和得到這個：

$('div.trigger-div').click(function() { // Click on trigger 
      var id = '#' + this.id + '-content'; // Find matching content div 
      var openContent = function() { 
        $(id).animate({width: 'toggle'}, 600); 
      }; 
      var current = $('div.content-div:visible'); // Find any open content 
      if (current.length > 0) { 
        current.animate({width: 'toggle'}, 600, 'linear', function(){ openContent(); }); // Close it then open new one 
      } 
      else { 
        openContent(); // Open new one 
      } 
     }); 

雖然這完美的作品，還是有一個問題，即一旦它打開你不能關閉任何的div。

意思是，如果我點擊「tile-about」div，「tile-about-content」會打開。當我再次點擊「平鋪」時，「平鋪內容」關閉並重新打開。我需要它關閉。

有沒有辦法獲得內容的id名稱，並嘗試將其與this.id匹配？

Answer 3

我在jQuery論壇的一個人的幫助下整理出來的。

這裏的解決方案 https://forum.jquery.com/topic/having-some-trouble-with-animate#14737000002530879

感謝您的幫助！