Fade Out Splash Page

Question

J'essaie de créer un fondu sur la page d'accueil que j'ai créée et qui se fond dans la page principale de mon site. Mon site est: http://www.simonsamuel.com/

Le code jQuery J'utilise est:

<script type="text/javascript"> 
    $("#splash").click(function() { 
     $("#splash").fadeOut("slow"); 
    }); 
</script> 

Et voici le code CSS:

#splash { 
    background-color: #ffffff; 
    background-image: url(http://i.imgbox.com/Al4c3tZ5.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: fixed; 
    top: -60px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 99999; 
} 

J'ai essayé un certain nombre de codes différents, mais je Je ne trouve pas celui qui fonctionne avec mon site. Et juste par curiosité, j'aimerais savoir s'il est possible de modifier le titre de la page Web avec jQuery? Je veux faire la police en majuscule de la barre de titre.

L'aide serait très appréciée, merci!

Answer 1

Je mis en place un violon pour démontrer les bases - http://jsfiddle.net/jayblanchard/nBdkU/

$(document).ready(function() { 
    $('#splash').css('opacity', '0.5'); // doing this with jQuery for ease 

    // here are the basics, just like your existing code 
    $("#splash").click(function() { 
     $("#splash").fadeOut("slow"); // you could also use $(this).fadeOut('slow'); 
    }); 
}); 

Regarder la console lors du chargement de votre page, je reçois une erreur de syntaxe qui pointe vers les mêmes problèmes que @ Puzzle84 souligne -

<script type="text/javascript"><br /> 
$(document).ready(function() {<br /> 
$('#splash').click(function() {<br /> 
    $('#splash').fadeOut(2000);<br /> 
    });<br /> 
</script> 

Toutes ces ruptures de ligne doivent être supprimées. Ensuite, comme il l'a souligné, vous avez besoin d'un autre jeu de crochets (});) avant la balise de script de fermeture. Lorsque je clique sur l'élément splash, il disparaît et votre site s'affiche. Si vous avez des choses que vous essayez de montrer dans l'élément splash, il vous suffira d'obtenir le positionnement CSS correct pour ceux-ci.

Il y a aussi d'autres erreurs relevées dans la console (Cargo.View.Main n'est pas définie)

Pour le bit du titre que vous pouvez faire un peu de JavaScript ou un peu jQuery pur -

document.title = 'the page title'; // changes the title 
document.title.toUpperCase(); // sets title to upper case 

$(document).attr('title', 'the page title'); // changes the title 
$(document).attr('title').toUpperCase(); // sets to upper case 

Answer 2

Quand je regarde votre code source que je vois ceci:

<br /> 
$(document).ready(function() {<br /> 
    $('#splash').click(function() {<br /> 
     $('#splash').fadeOut(2000);<br /> 
    });<br /> 

pourquoi est-il dans ce code LineBreaks? c'est le code html.

outre que votre code est incomplet

$(document).ready(function() { 
    $('#splash').click(function() { 
     $('#splash').fadeOut(2000); 
    }); // forgot these 
}); // or these