I would like to initiate an animation on a website but only i a certain checkbox is checked however I can't find how to do it. Can you guys help me?
For now I got this:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
<script>
$(document).ready(
if (document.getElementById('#slide-1').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-1').fadeIn(1000);
}
}
else if (document.getElementById('#slide-2').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-2').fadeIn(1000);
}
}
else if (document.getElementById('#slide-3').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-3').fadeIn(1000);
}
}
);
</script>
</head>
<body>
<div id="sl-principal">
<div id="sl-lucarne">
<article class="sl-art" id="sl-art-1">
<h2>Premier article</h2>
<p>Premier slide</p>
</article>
<article class="sl-art" id="sl-art-2">
<h2>Deuxième article</h2>
<p>Deuxième slide</p>
</article>
<article class="sl-art" id="sl-art-3">
<h2>Troisième Article</h2>
<p>Troisième slide</p>
</article>
</div>
</div>
<article class="checkbox">
<label for="sl-art-1"><input type="radio" name="slide" value="slide-1" id="slide-1">Slide 1</input></label>
<label for="sl-art-1"><input type="radio" name="slide" value="slide-2" id="slide-2">Slide 2</input></label>
<label for="sl-art-1"><input type="radio" name="slide" value="slide-3" id="slide-3">Slide 3</input></label>
</article>
</body>
As you can see I would like to fade to a certain slide depending on witch box is checked.
Thanks for any help.
Aucun commentaire:
Enregistrer un commentaire