滑動轉換不在js中相互監聽

我有一個js過渡我無法解決。有三個鏈接，藍色/綠色/紅色，當您選擇顏色色板滑入上面位置的其中一個鏈接時。再次推動相同的鏈接，使色樣滑入下面位置。滑動轉換不在js中相互監聽

如何讓每個色板在滑入上位之前將所有其他色板滑入下位？

// When the DOM is ready, initialize the scripts. 
jQuery(function($){ 

// Get a reference to the container. 
var container = $(".container"); 

// Bind the link to toggle the slide. 
$("a").click(
function(event){ 
// Prevent the default event. 
event.preventDefault(); 

// Toggle the slide based on its current visibility. 
if (container.is(":visible")){ 

// Hide - slide up. 
container.slideUp(500, function(){ $('').show(); }); 
} else { 

// Show - slide down. 
container.slideDown(500, function(){ $('').hide(); }); 
} 
} 
); 

});

JSFiddle Demo

來源

2013-10-07 need2nobasis

我叉你的jsfiddle用一個簡單的解決方案：http://jsfiddle.net/cwmanning/jvj2u/2/

所有在小提琴中，但它使用數據屬性來切換類而不是onClick屬性。

// Bind the link to toggle the slide. 
$("a").click(function(event){ 
    // Prevent the default event. 
    event.preventDefault(); 
    var $this = $(this); 
    var $target = $("#target"); 

    if ($target.attr("class") === $this.attr("data-color")) { 
     container.slideUp(500); 
    } else { 
     // Hide - slide up. 
     container.slideUp(500, function(){ 
      $target.attr("class", $this.attr("data-color")); 
      // Show - slide down. 
      container.slideDown(500); 
     }); 
    } 
});

來源

2013-10-07 19:11:37 chrisM

你給我的建議是理想的，但我需要它在小提琴內的if語句中工作，所有的選項都是src img，沒有一個是數據顏色。如果你可以修改它，你的代碼將是理想的。 – need2nobasis

這是一個快速的解決方法。我相信有一種更優雅的方式，但似乎工作。

只是改變了以下內容：

function slider(v) { 
    colors = { 
     'blue':'blue2', 
     'red' :'red2', 
     'green':'green2' 
    } 
    var confirm = document.getElementById("target"); 
      if (colors.hasOwnProperty(v)){ 
       setTimeout(function(){target.className = colors[v]},500); 
       }else {target.className = "chart";} 
}

替代到位下面，你目前擁有的，如果（......是（「：可見」）。我不會在底部的意思。代碼只是子在現在坐在你的代碼下面

if (container.is(":visible")){ 
// Hide - slide up. 
    container.slideUp(500,function(){$().hide()}); 
    setTimeout(function(){ 
     container.slideDown(500, function(){ $('').show(); }) 
    },500); 

}else{ 
    container.slideDown(500,function(){$().hide()}) 

}

來源

2013-10-07 18:47:04

我爲您添加了一個新鏈接，以查看我在我身邊看到的內容。 [小提琴鏈接]（http://jsfiddle.net/L8uee/1/） – need2nobasis

好的，我不夠清楚。看到我原來的帖子。 –

如果你一次開始點擊一堆，那麼超時會變得非常糟糕。我幾乎有一個解決方案，然後看到你發佈這個，放棄並退出......真的很後悔，現在 – Kierchon

滑動轉換不在js中相互監聽

回答

相關問題