Fade from DIVS

Question

Я пытаюсь сделать эффект затухания между несколькими div. Но он не работает, пожалуйста, кто-нибудь может мне помочь «Im new in javascript»
Это demo, откуда я генерирую код.
В этом demo код работает очень хорошо, но когда я копирую код, он перестает работать.
Надеюсь, мой вопрос ясен! THANKS
Это код, который я пытаюсь скопировать.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 

txt1 = $("#contentarea-1").text(); 
txt2 = $("#contentarea-2").text(); 

$("#pg1").on('click', function() { 
    $('#contentarea-2').hide(); 
    $('#contentarea-1').fadeOut(500, function() { 
     $("#contentarea-1").hide(txt2); 
     $('#contentarea-1').fadeIn(500); 
    }); 
}); 

$("#pg2").on('click', function() { 
    $('#contentarea-1').hide(); 
    $('#contentarea-2').fadeOut(500, function() { 
     $("#contentarea-2").text(txt2); 
     $('#contentarea-2').fadeIn(500); 
    }); 
}); 

</script> 

<style> 
#content-wrapper{ 
    margin-left: 50px; 
} 
#contentarea-1{ 
    width: 450px; 
} 

#contentarea-2{ 
    width: 450px; 
    display:none; 
} 

#clear{ 
    clear: both; 
} 

nav{ 
    text-align: center; 
} 

nav ul{ 
    list-style: none; 
} 

nav ul li{ 
    display: inline-block; 
    padding: 15px; 
} 
</style> 

<nav> 
    <ul> 
     <li><a href="#1" id="pg1">Page 1</a></li> 
     <li><a href="#2" id="pg2">Page 2</a></li> 
    </ul> 
</nav> 
<div id="content-wrapper"> 
    <div id="contentarea-1"> 
     <wbr><p>FIRST PAGE</p></wbr> 
    </div> 
    <div id="contentarea-2"> 
     <wbr><p> SECOND PAGE</p></wbr> 
    </div> 
    <div id="clear"></div> 
</div> 

Answer 1

Необходимо внести небольшое изменение. Вы забыли обернуть JavaScript в JQuery domready контейнере:

http://jsfiddle.net/3tx8u/

<script> 
$(function() { 
    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 

    $("#pg1").on('click', function() { 
     $('#contentarea-2').hide(); 
     $('#contentarea-1').fadeOut(500, function() { 
      $("#contentarea-1").hide(txt2); 
      $('#contentarea-1').fadeIn(500); 
     }); 
    }); 
    $("#pg2").on('click', function() { 
     $('#contentarea-1').hide(); 
     $('#contentarea-2').fadeOut(500, function() { 
      $("#contentarea-2").text(txt2); 
      $('#contentarea-2').fadeIn(500); 
     }); 
    }); 
}); 
</script> 

Answer 2

Вы также могли бы использовать fadeToggle()

$(function() { 
    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 

    $("#pg1").on('click', function() { 

     $('#contentarea-1').fadeToggle(function() { 
      $('#contentarea-2').fadeToggle(); 
     }); 

    }); 

    $("#pg2").on('click', function() { 
     $('#contentarea-2').fadeToggle(function() { 
      $('#contentarea-1').fadeToggle(); 
     }); 

    }); 
}); 

http://jsfiddle.net/WuVk9/

Answer 3

Вы должны выполнить свой код внутри document ready функция.

Описание: Укажите функцию, выполняемую при полной загрузке DOM .

Обеспечивает, чтобы все объекты страницы загружались в DOM, прежде чем пытаться получить к ним доступ и использовать их.

В jsFiddle ваш код работает, потому что вы выбрал запустить скрипт-код в «OnLoad», в вашем реальном коде без OnLoad вы должны использовать document.ready

$(document).ready(function() { 

    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 
    $("#pg1").on('click', function() { 
     $('#contentarea-2').hide(); 
     $('#contentarea-1').fadeOut(500, function() { 
      $("#contentarea-1").hide(txt2); 
      $('#contentarea-1').fadeIn(500); 
     }); 
    }); 
    $("#pg2").on('click', function() { 
     $('#contentarea-1').hide(); 
     $('#contentarea-2').fadeOut(500, function() { 
      $("#contentarea-2").text(txt2); 
      $('#contentarea-2').fadeIn(500); 
     }); 
    }); 
}); 

Работа скрипку: http://jsfiddle.net/IrvinDominin/KBGp7/4/