jQuery анимирует div, в то время как замирание запускает и выводит - PullRequest
Новая
       34

jQuery анимирует div, в то время как замирание запускает и выводит

1 голос
/ 19 февраля 2011

У меня есть строка меню, которая скользит по странице при нажатии на изображение, и сдвигается назад при нажатии на альтернативное изображение.Я хотел бы включить постепенное исчезновение только что нажатого изображения и постепенное исчезновение незамеченного изображения, поскольку строка меню анимирована.Я уверен, что это можно сделать с помощью динамической функции ... но это за пределами моего понимания.

Спасибо за вашу помощь!

HTML: 

<div id="main">
    <div id="trigger_left">
        <img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
    </div>
    <div id="trigger_right">
        <img class="arrow_small" src="images/right_small.png" alt="slide menu in" />
    </div>
    <div id="slider">
         <p>This is Content</p>
    </div>
</div>

Javascript: 

$(document).ready(function() {
    //Page Load
    $('#slider').css({
        width: '30px'
    });
    // Navigation drop down menu
    $('#trigger_left').click(function() {
        $('#slider').animate({
            width: '100%'
        }, 1500);
    });
    $('#trigger_right').click(function() {
        $('#slider').animate({
            width: '30px',
        }, 1500);
        }

    );
});

1 Ответ

1 голос
/ 19 февраля 2011

Прежде всего вы можете захотеть кэшировать ваши объекты jQuery для повышения производительности и читабельности, затем вы можете добавить метод .stop(), чтобы остановить текущую анимацию и запустить новую из текущей точки, вместо того, чтобы видеть очереди анимации и циклы и ведет себя странно. затем добавьте .fadeOut() и .fadeIn() к триггерам, когда произойдет щелчок. И вам следует привыкнуть к использованию .bind(), а не .click(), .keydown() и т. Д., Так как это псевдонимы для метода связывания, поэтому более эффективно использовать связывание напрямую. Кроме того, проще использовать пространства имен событий с привязкой и многое другое. Check the jQuery API!

var trigger_left = $('#trigger_left'),
    trigger_right = $('#trigger_right'),
    slider = $('#slider');

slider[0].style.width = "30px"; // and use native js where you can 
        //- it speeds things up and prepares you for when you can't use jQ :)

trigger_left.bind('click', function() {
    trigger_left.stop().fadeOut();
    trigger_right.stop().fadeIn();
    slider.stop().animate({
        width: '100%'
    }, 1500);
});
trigger_right.bind('click', function() {
    trigger_right.stop().fadeOut();
    trigger_left.stop().fadeIn();
    slider.stop().animate({
        width: '30px',
    }, 1500);
    }

);
...