スライドアップメニューの画像を非表示にする問題

Question

スライドアップとスライドダウンのメニューがあります。

ユーザーがmenuAreaをクリックすると、メニューが開き、十字が表示されます。 ボタンを閉じるには、ユーザーが画像をクリックすると、その画像が見えなくなります。

この手順で問題が発生しています。このフィドルで

ルック：http://jsfiddle.net/pedroR/7YNJY/3/

注：ここ

おかげ

Answer 1

が#menuText要素に含まれているという問題があります。それはあなたがimg要素をクリックすると、#menuTextのクリックイベントハンドラも解雇されることを意味し、それを実行すると、それは後ろにimgをフェードイン。

あなたはそのimgクリックイベントハンドラに引数を追加することで防ぐことができ、そしてバブルアップからのイベントを防ぐためにstopPropagationを呼び出す：

$('#menuArea #menuText img').click(function(e) { 
    e.stopPropagation(); 
    $('#menuArea ul').delay(100).slideUp(250); 
    $(this).stop(true, true).delay(100).animate({ 
     opacity: 0 
    }, '100', 'linear'); 
}); 

ここworking exampleです。

Answer 2

http://jsfiddle.net/7YNJY/12/はこれを試してみるため、画像のクロムまたはIEでこのフィドルを参照してください。あなたはアニメーションを戻すことができますが、読みやすくするためにちょっとダブってしまいました。

Answer 3

これがあなたが探している結果であるかどうかを確認してください：http://jsfiddle.net/rkw79/7YNJY/13/