Скрыть/показать Divs с помощью эффектов JQuery

Question

Я пытаюсь скрыть главный div и показать другой, с jquery, я закодировал это, но его не работает. Это jquery и css.

  <script> 
$(".mib").click(
function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
      }); 
      }); 

    </script> 

<style> 
#content div { 
    display: none; 
    position: relative; 
    top: 0; 
    left: 0; 
} 
#content div.activec { 
    display: block; 
} 
</style> 

и вот HTML

<div id="menu"> 
<a href="" class="mib">Mision(actually here goes an image)</a> 
</div> 

<div id="content"> 
<div id="intro" class="activec">Intro Text</div> 
<div id="mision">Mision Text</div> 
</div> 

я пересмотрел код, и я до сих пор не могу найти ошибку .. Пожалуйста, помогите :)

Answer 1

Попробуйте это:

И инкапсулировать скрипт в ready обратного вызова:

$(document).ready(function(){ 
    $(".mib").click(function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
     }); 
    }); 
}); 

DEMO

Answer 2

Попробуйте изменить

$(".mib").click(
function Mision() { 

До

$(".mib").click(
function() { 

(Nevermind на последнее редактирование, у вас есть нужное количество закрывающих скобок.)

Answer 3

Держите его просто - http://jsfiddle.net/4KP5F/1/

$(".mib").on("click", function(e) { 
    e.preventDefault(); 

    $("#intro").fadeOut(400, function() { 
     $("#mision").fadeIn(400); 
    }); 
}); 

Answer 4

$(".mib").bind('click',function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
     }); 
    });