Задержка анимации jQuery при наведении

Question

Задержка анимации jQuery при наведении

0

Я кодирую некоторый jQuery, чтобы оживить все.linkbox, чтобы увеличить его по высоте, и он отлично работает, за исключением того, что элемент, который я нажимаю, медленнее, чем два других элемента (так что он медленнее накладывается), как мне сделать все три элемента анимированными точно так же, разве они не должны это делать? Также они оживляют со дна, можно ли рассказать об этом, чтобы оживить его сверху?

Здесь ссылка со всем кодом: http://jsbin.com/fihes/2/edit?html,css,js,output

Заранее спасибо!

HTML:

<body>
    <div class="linkbox"><div class="text">Om mig</div></div>
    <div class="linkbox"><div class="text">Portfolio</div></div>
    <div class="linkbox"><div class="text">Kontakt</div></div>
</body>

CSS:

body{
background:black;
background-attachment:fixed;
width: 102%;
margin: 0px;
padding: 0px;
}

.linkbox{
opacity: 0.5;
width:33%;
height: 200px;
background-color: #ffffff;
padding: 0px;
margin: -2px;
display:inline-block;
margin-top: 35%;    
}

.linkbox:hover{
    opacity: 1;
    transition: all 0.4s ease;

}

.text{
    text-align:center;
    font-family: Helvetica;
    font-size: 42px;
    padding: 74px;
}

JQuery:

$(document).ready(function(){
$('.linkbox').click(function(){
    $('.linkbox').animate({height:"400px"}, "slow", "swing");
});
$('.text').click(function(){
    $('.text').fadeTo("fast", 0);
});
});

Jojje Berglund 15 фев. 2014, в 15:56

Источник

Теги:

javascript

jquery

html

css

animation

1 ответ

Ещё вопросы

CRABOLO · Answer 1 · 2014-02-15T12-42-00.000Z

Ваш код клика медленнее, потому что у вас "slow", вы можете изменить его на "fast" а вот так:

$('.linkbox').click(function(){
    $('.linkbox').animate({height:"400px"}, "fast", "swing");
});

Чтобы ответить на ваш второй вопрос, я не верю, что это возможно только с помощью .animate() чтобы он скользил сверху вниз. Однако есть эффект .slideDown().

Метод.slideDown() анимирует высоту согласованных элементов. Это приводит к тому, что нижние части страницы скользят вниз, что позволяет выявить объекты

http://api.jquery.com/slidedown/

Единственное, что он делает - ускоряет анимацию. Дело в том, что элемент div, на который я нажимаю, медленнее в анимации, чем два других элемента div, поэтому, если я нажимаю на средний элемент div, элементы div, расположенные рядом с ним, завершили свою анимацию, когда средний элемент div находится на полпути через его. анимация.
ну, вы можете изменить другие на «медленный», или вы можете использовать время в миллисекундах .. как 5000, что будет 5 секунд
Как мне это сделать? У меня есть только этот фрагмент кода, разве все три элемента div не должны иметь одинаковую скорость анимации?