jquery: aktive bogstaver bliver ikke på samme position
HejUdtrykkene "overblik", "blikfang", "og SEO" rykker hele tiden til højre, men burde alle 3 være ud for "kan bruges til".
Jeg har søgt efter svar på nettet, men uden held.
Sig endelig til, hvis det er noget der skal uddybes
Her er html og java script koden:
<html>
<head>
<link rel="stylesheet" href="forside.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".header .variable-text").animate({opacity:0}, 0);
$(".header .active-text").animate({opacity:1}, 0);
$(".header .active-text").animate({opacity:0}, 4000);
var handle = setInterval(changeText, 5000);
var int = setInterval(pump, 2000);
function changeText()
{
var $activeText = $(".header .active-text");
//get current text
var $nextText = $activeText.next();
//get next text
if($activeText.next().length == 0)
$nextText = $(".header .variable-text:first");
$nextText.css({opacity: 1}).addClass("active-text").animate({opacity:0}, 4000, function(){
$activeText.removeClass("active-text");
});
}
});
</script>
</head>
<body>
<table width='800px' align='center'>
<tr><td><div class="header">
<h1 class="header-text">Overskrift</h1>
<div class="sub-text"><h3>kan bruges til</h3></div>
<div class="variable-text active-text"><h3>overblik</h3></div>
<div class="variable-text" ><h3>blikfang</h3></div>
<div class="variable-text" ><h3>og SEO</h3></div></div>
</td></tr></table>
</body>
</html>
Og her er css koden
.header
{
width:800px;
height:160px;
background:#98bf21;
align:middle;
overflow-x:hidden;
overflow-y:hidden;
}
h3,.sub-text,.variable-text
{
display: inline
}
.header-text
{
margin-left:20px;
position:relative;
font-size:2.8em;
}
.sub-text
{
margin-left:30px;
position:relative;
font-size:1.8em;
}
.variable-text
{
position:relative;left:10px;
//opacity:0;
font-size:1.8em;
}
.active-text
{
position:relative;
left:10px;
//opacity:0;
font-size:1.8em;
}
Mvh Carsten
