jQuery的動畫格上下上點擊

所以我有這樣的HTMLjQuery的動畫格上下上點擊

<div id="one">One</div> 
<div id="two">Two <br/> <br/> 
    Two 
</div> 
<div id="three">Three</div> 
<div id="four">Four <br/> <br/> 
    Four <br/> <br/> 
    Four 
</div>

的jQuery：

$(document).ready(function() { 
    $("#two").hide(); 
    $("#four").hide(); 
    $("#one").click(function() { 

     $("#four").slideUp("slow", function() { 

     }); 
     $("#three").slideToggle("slow,", function() { 

     }); 

     $("#two").slideToggle("slow", function() { 

     }); 
    }); 

    $("#three").click(function() { 
     $("#four").slideToggle("slow,", function() {}); 
    }); 
});

我試圖做的是節目的div一個和下另外三個一個。當我點擊div一個時，我想讓div二顯示（動畫）和div三（和div四，如果div三也被點擊）移動位置div div two（以相同的動畫）。

當我再次單擊div時，我想要div div隱藏（動畫）和div三（和div四，如果div三單擊）以返回到之前的位置。

這裏的jsfiddle：http://jsfiddle.net/6ynnR/

來源

2014-01-23 naou

如果你在小提琴中包含jQuery，這將有所幫助 - 這是你的問題;）http://jsfiddle.net/6ynnR/ –

謝謝你。不過，我的問題是，當我點擊div時，div三和div四隱藏起來。我希望他們都在div div被點擊後在div div下移動，然後在div div被再次點擊時向上移動 – naou

好像你想是這樣的：EXAMPLE HERE

更新的jQuery：

$("#two, #four").hide(); 

$("#one").click(function() { 
    $("#two").slideToggle(function() { 
     $("#four").slideUp(); 
    }); 
}); 

$("#three").click(function() { 
    $("#four").slideToggle(function() { 
     $("#two").slideUp() 
    }); 
});

另外，這裏是另一種方法：EXAMPLE HERE

來源

2014-01-23 00:34:14

只是刪除下面的代碼，你去好：d

$("#four").slideUp("slow", function() { 

    }); 
    $("#three").slideToggle("slow,", function() { 

    });

來源

2014-01-23 00:35:36 rd87

我希望這會爲你工作，

我加入的條件語句：

if(($("#two").is(":visible"))&&($("#four").is(":visible"))){ 

     $("#four").slideToggle("slow,", function() {}); 
     $("#two").slideToggle("slow,", function() {}); 

    }

和刪除兩個功能：

$("#four").slideUp("slow", function() { 
    }); 

$("#three").slideToggle("slow,", function() { 
    });

http://jsfiddle.net/uY73z/19/

來源

2014-01-23 01:04:18 amaro

jQuery的動畫格上下上點擊

回答

相關問題