javascript - 滑动过渡在 js 中不相互监听

Question

我有一个无法解决的 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 演示

Answer 1

我用一个简单的解决方案分叉了你的 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);
        });
    }
});

Answer 2

这是一个快速的解决方法。我相信有一种更优雅的方式，但似乎有效。

只需更改以下内容：

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(.... is(":visible") 的位置。我的意思不是在代码的底部。只需将以下内容放在它现在位于代码中的位置即可。

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()})

}