Question

我是jQuery的初学者，我正在尝试它。我用三个盒子做了一个简单的网站。当您单击一个框时，它会与所有其他div一起淡出。然后，出现一篇文章，我最终会放置文本。在右上角，有一个后退按钮，当点击时，应该淡化文章并再次将三个盒子带回来。它这样做，但唯一的问题是文章向下滑动。

JSFIDDLE：http://jsfiddle.net/VsC5u/

<body><center>
<div class="div" id="one">
</div>    <div class="div" id="two">
</div>    <div class="div" id="three">
</div></center>
<article class="slider" style="display:none;" id="1"><div class="back">Back</div>
</article><article class="slider" style="display:none;" id="2"><div class="back">Back</div>
</article><article class="slider" style="display:none;" id="3"><div class="back">Back</div>
</article>

CSS：

.div {
width:100px;
height:100px;
border: 1px solid #848287;
text-align: center;
background-color: #33E879;
display: inline-block;
margin:20px;
 }
.slider{
width:100%;
height:100px;
border: 1px solid #848287;
text-align: center;
background-color: #33E879;
display: inline-block;
}
.back{
 width:100px;
 height:20px;
background-color:white;
border:1px solid black;
float:right;
}
}

JAVASCRIPT：

$(document).ready(function(){
$('#one').click(function(){
        $(this).fadeTo('fast', 0.25);
 $('#two').delay(300).fadeOut('slow');
    $('#one').delay(300).fadeOut('slow');
     $('#three').delay(300).fadeOut('slow');
        $('#1').delay(1300).fadeTo('slow', 1);
});
$('#two').click(function(){
        $(this).fadeTo('fast', 0.25);
$('#one').delay(300).fadeOut('slow');
     $('#three').delay(300).fadeOut('slow');
    $('#two').delay(300).fadeOut('slow');
        $('#2').delay(1300).fadeTo('slow', 1);
});
    $('#three').click(function(){
        $(this).fadeTo('fast', 0.25);
        $('#three').delay(300).fadeOut('slow');
         $('#two').delay(300).fadeOut('slow');
     $('#one').delay(300).fadeOut('slow');
        $('#3').delay(1300).fadeTo('slow', 1);
});
$('div[class=back]').click(function(){
    $('article[class=slider]').fadeOut('slow');
    $('div[class=div]').delay(800).fadeTo('slow', 1);

});
});

文章在褪色时向下移动

0 个答案: