Я создал jquery-анимацию, когда вы нажимаете на одну из кнопок, скрытые div-слайды left: -650px;
left: 0px;
нажмите здесь, чтобы увидеть пример. Однако я заметил, когда вы нажимаете на другую кнопку, чтобы открыть другой скрытый div, проницаемый скрытый div не возвращается к исходной позиции left: -650px;
он остается слева: 0; кто-нибудь знает, что мне нужно добавить, чтобы достичь этого...?
HTML:
<div id="wrapper">
<div class="top-block">
<ul>
<li><a id="one" href="#" class="proBtn">block</a>
</li>
<li><a id="two" href="#" class="proBtn">test</a>
</li>
<li><a id="three" href="#" class="proBtn">test</a>
</li>
<li><a id="four" href="#" class="proBtn">Lists</a>
</li>
<li><a href="#" class="proBtn">hello</a>
</li>
<li><a href="#" class="proBtn">test</a>
</li>
</ul>
<!-- HOME SECTION -->
<div id="one-bck" class="mid-block fadeInLeft" style="background:green;"></div>
<div id="two-bck" class="mid-block fadeInLeft" style="background:red;"></div>
<div id="three-bck" class="mid-block fadeInLeft"></div>
<div id="four-bck" class="mid-block fadeInLeft"></div>
</div>
</div>
JS
$(document).ready(function () {
$('.proBtn').click(function () {
$('li').removeClass('active');
$('li a').removeClass('blue');
$(this).parent("li").addClass('active');
$(this).addClass('blue');
});
$('#one').click(function () {
$('#two-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#three-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#four-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#one-bck').addClass('animated').animate({
left: '0px',
opacity: 1
}, 500);
});
$('#two').click(function () {
$('#one-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#three-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#four-bck').animate({
left: '-650px;',
opacity: 0
}, 1500).removeClass('animated');
$('#two-bck').addClass('animated').animate({
left: '0px',
opacity: 1
}, 500);;
});
$('#three').click(function () {
$('#one-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#two-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#four-bck').animate({
left: '-650px;',
opacity: 0
}, 500).removeClass('animated');
$('#three-bck').addClass('animated').animate({
left: '-650px;',
opacity: 0
}, 500);
});
});
Вы действительно можете попытаться упростить это, кроме как только исправления проблемы css и removeClass. Вместо привязки обработчиков событий к каждой из этих идентификаторов может быть головная боль мошенничества, так как все они делают то же самое. Вы можете добавить атрибут данных в теги привязки, т.е. data-target="#three-bck"
и выбрать их для анимации. Он может работать только в одном обработчике событий.
HTML:
<ul>
<li><a id="one" href="#" class="proBtn" data-target="#one-bck">block</a>
</li>
<li><a id="two" href="#" class="proBtn" data-target="#two-bck">test</a>
</li>
<li><a id="three" href="#" class="proBtn" data-target="#three-bck">test</a>
</li>
<li><a id="four" href="#" class="proBtn" data-target="#four-bck">Lists</a>
</li>
<li><a href="#" class="proBtn">hello</a>
</li>
<li><a href="#" class="proBtn">test</a>
</li>
</ul>
JS:
$(document).ready(function () {
$('.proBtn').click(function () {
$('li').removeClass('active').find('a').removeClass('blue'); //chain it
var $this = $(this); //cache this first
$this.addClass('blue').closest("li").addClass('active');
$('.mid-block.animated').animate({ //start animate for reverse in case if there is anything already selected
left: '-650px',
opacity: 0
}, 500, function(){
$(this).removeClass('animated'); //once done remove its class
}).promise().done(function () { //once this is done start animating your target by selecting the target element from its own data attribute
$($this.data('target')).addClass('animated').stop(true, true).animate({
left: '0px',
opacity: 1
}, 500);
});
});
});
Удалите left:'-650px;'
после "px" left:'-650px;'
,
left:'-650px'
только left:'-650px'
.