アニメーション（{}）を使用して、単純なエフェクトfadeIn（）、fadeOut（）、slideUp（）、slideDown（）を書き換えるにはどうすればよいですか？

Question

なぜ今は動作しないのか分かりません。私は書く：

$(function() { 
    $('a').click(function(){ 
     $('div#box').animate({ 
      opacity: 1 
     }); 
    }); 
}); 

div { 
    width: 250px; 
    height: 250px; 
    background-color: #000040; 
    display: none; 
} 

そしてそれはfadeIn()ではない。 これらの簡単なことを行うにはどうすればよいですか？

Answer 1

EDITは：以下の作品が、jQueryのソースを見ると、これははるかに簡単であることが明らかになった。ここで

$(function() { 
    $('a').click(function(){ 
     $('#box').animate({ 
      opacity: "show" 
     }); 
     return false; 
    }); 
}); 

は、これらのslideDown /上/切り替えを定義するjQueryのソースの関連する部分であり、およびフェードイン/アウト機能：

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" } 
}, function(name, props){ 
    jQuery.fn[ name ] = function(speed, callback){ 
     return this.animate(props, speed, callback); 
    }; 
}); 

---

CSSルール「display: none」は、それが透明であることを意味しません、それはある意味します表示されません。表示をblockに設定し、アニメーションを作成する必要があります。クリック機能でfalseを返すと、リンクがユーザーを別のページに陥らせないようにすることができます（または、href属性を "＃"に設定するだけで済みます）。

$(function() { 
    $('a').click(function(){ 
     $('#box').css('opacity', '0'); 
     $('#box').css('display', 'block'); 
     $('#box').animate({ 
      opacity: 1 
     }); 
     return false; 
    }); 
});