3

divを重ねてメニューを作成する必要があります。divをクリックしたときに、他のdivの上に配置したいと思います。

これと非常によく似ていますが、クリックすると、他のdivの上にフェードインします。

何か案は？

ありがとう。

4

3 に答える 3

4

多分このような何か。それに合わせて微調整が必​​要な場合があります。

デモ

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).fadeOut('slow', function() {
        $(this).css("zIndex",100);
        $(this).fadeIn('slow');
    });
});​
于 2012-07-31T08:07:20.197 に答える
2

不透明度が一番上にあるときに、ユーザーがアニメーション化して不透明度をアニメーション化できますか：http: //jsfiddle.net/bingjie2680/f9j9a/120/

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).css({"zIndex":100, 'opacity':0.4}).animate({'opacity':1}, 1000);
});​
于 2012-07-31T08:04:43.817 に答える
1

これは機能し、イベントの委任により、（他の回答とは対照的に）その場でボックスを追加および削除することもサポートします。

$("#container").on("click", "div", function(e) {
  $("#container div").css("z-index", 0); 
  $(this).css({ "z-index": 10, "opacity": 0.4 })
         .fadeTo(400, 1);
});

オプションで追加.not($(this))し$("#container div")て、現在選択されているボックスのz-indexが0に変更されないようにします。しかし、実際には必要ないので、ライン上で10に戻すためです。ただし、コードが将来さらに複雑になる場合は、バグを回避するのに役立つ可能性があります。

ここで試してみてください：http：
//jsfiddle.net/BWABk/

于 2012-07-31T08:02:56.657 に答える