我无法弄清楚如何编写该代码。
我想要的是它们是两个文本,我们可以点击文本,第一个叫做“test”,第二个叫做“test2”
有一个方框,框内有“配置文件”,当点击“测试”文本时,该框将从左侧移动到中心,并将文本从配置文件更改为框内的“新世界”。 / p>
另一个如果点击test2,该框将移至右侧并将文本更改为“我”
来自预览文字,但问题是当点击test2时,(向右移动)将滑过幻灯片中心并将文本更改为“新世界”,然后转到右侧并将文本更改为“我”。
我不想在转到右边之前不想显示或改变文字。或者如果我是右侧并且想要左侧不是中心,我不想在向中心滑动并显示“新世界”时显示文本更改,我想通过它。
请参阅演示http://jsfiddle.net/Alidad/7eFXS/
我该如何解决这个问题。
请查看代码
//css
#apDiv12 {
position: absolute;
left: 4px;
top: -35px;
width: 271px;
height: 45px;
z-index: 102;
background-image: url(images/tab-box.fw.png);
background-repeat: no-repeat;
}
//this is where to click on the text"
<p>test</p>
<p id='me'>test2</p>
//php code..
<div id="apDiv12">
<h1 id="toptitle">Profil</h1>
<h1 id="toptitled">Profil2</h1>
</div>
// jquery section
$(document).ready(function(){
$('#picTwo').hide();
$("p").click(function() {
$('#apDiv12').animate({left: "200px"}, 3000, function () {
$('#toptitle:contains("Profil")').text("New word"), 3000;
$('#picOne').fadeOut(500, function(){
$('#picTwo').fadeIn('fast');
});
});
});
});
$(function(){
$("#me").click(function() {
$('#toptitle').hide();
$('#apDiv12').animate({left: "400px"}, 3000, function () {
$('#toptitled:contains("Profil2")').text("me"), 3000;
$('#picTwo').fadeOut(500, function(){
$('#picOne').fadeIn('fast');
});
});
});
});