JQuery Animate () выпуск

Question

JQuery Animate () выпуск

0

Я создал 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);
    });

});

NewKidOnTheBlock 21 сен. 2013, в 19:12

Источник

Теги:

javascript

jquery

css

2 ответа

0

Удалите left:'-650px;' после "px" left:'-650px;' ,

left:'-650px' только left:'-650px'.

user1281428 21 сен. 2013, в 14:58

0

о, просто исправить ура чувак
NewKidOnTheBlock 21 сен. 2013, в 16:53
0

А ну понятно. это потому, что .removeClass вызывается и удаляет блок display: до того, как анимация едва запускается.
user1281428 21 сен. 2013, в 17:04
0

Вы действительно должны уменьшить свой код. Слишком много повторений ....
PSL 21 сен. 2013, в 17:14
0

Очень верно. Продолжайте учиться!
user1281428 21 сен. 2013, в 19:48

Показать ещё 2 комментария

Ещё вопросы

А ну понятно. это потому, что .removeClass вызывается и удаляет блок display: до того, как анимация едва запускается.
Вы действительно должны уменьшить свой код. Слишком много повторений ....
Очень верно. Продолжайте учиться!

PSL · Accepted Answer · 2013-09-21T15-25-00.000Z

Вы действительно можете попытаться упростить это, кроме как только исправления проблемы 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);
        });
    });
});

скрипка

Спасибо, чувак, я все еще новичок в Jquery, так что в данный момент я набираю код