Блог

Главная - Вопросы по программированию - .animate() работает нормально один раз, но не дважды

.animate() работает нормально один раз, но не дважды

#jquery #html #jquery-animate

#jquery #HTML #jquery-animate

Вопрос:

Прежде всего, спасибо за чтение и извините за мой английский.

Я пытаюсь создать динамическое меню, в котором вы нажимаете на значок, а затем выбранное поле (li) анимируется, чтобы получить большую ширину. Когда я нажимаю на поле, оно отлично анимируется и получает ширину, и оно меняет свой класс с «невыбранного» на «выбранный». Затем, когда я нажимаю на него снова, он не получает свою первоначальную ширину.

JQUERY:

 $(document).ready(function(){

    $("li.unselected").on("click",expand);
    $("li.selected").on("click",reduce);

    function expand(){
        $(this).animate({
            width: '150px'
        });
        $(this).removeClass("unselected");
        $(this).addClass("selected");
    }

    function reduce(){
        $(this).animate({
            width: '30px'
        });
        $(this).removeClass("selected");
        $(this).addClass("unselected");
    }
});

PD: я уже проверил HTML-код, поскольку он работает, и класс отлично меняется с «невыбранного» на «выбранный», но он не работает наоборот.

Комментарии:

1. $(document).on(«click», «li.selected», уменьшить);

2. @KaiQing Он расширяется и сразу же снова уменьшается 🙁

Ответ №1:

Если вы измените своих слушателей на привязку к документу, он должен работать нормально:

 $(document).on("click","li.unselected", expand);
$(document).on("click","li.selected", reduce);

http://jsfiddle.net/b5PB2/1/

Вы также можете управлять этим с помощью CSS-переходов: http://jsfiddle.net/b5PB2 /

 //html    
<ul class="list">
    <li>Something</li>
    <li>Something Else</li>
</ul>

//css
.list li{
    width:30px;
    height:20px;
    overflow:hidden;
    background:#d1d1d1;
    margin-bottom:10px;
    transition: width 0.5s linear;
}

.list li.selected{
   width:150px;
   transition: width 0.5s linear;
}

//basic jquery listener to toggle class
$(document).ready(function(){
    $('.list li').on('click', function(){
        $(this).toggleClass('selected');
    });
});

примечание — я использую sass с autoprefixer, поэтому переход автоматически генерируется в соответствии с различными потребностями для таких вещей, как webkit и т. Д. Вам нужно будет найти префиксы, необходимые для css-переходов для работы во всех браузерах.