jQuery 애니메이션 지연 (호버시)

모든 .linkbox의 애니메이션을 높이기 위해 .linkbox를 코딩하고 있는데, 클릭하는 요소가 다른 두 요소보다 느리다는 점을 제외하고는 훌륭하게 작동합니다. 마우스를 올리면 속도가 느려짐), 세 가지 요소를 정확히 동일한 방식으로 애니메이션화하려면 어떻게해야합니까? 또한 맨 아래부터 애니메이션을 적용하여 애니메이션을 맨 위에서 애니메이션으로 만들 수 있습니까? 사전에 http://jsbin.com/fihes/2/edit?html,css,js,output jQuery 애니메이션 지연 (호버시)

감사 :

여기에 모든 코드와 링크입니다!

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를 : 당신이 "slow"을 가지고 있기 때문에

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

출처

2014-02-15 Jojje Berglund

귀하의 클릭 코드가 느린 경우처럼, 대신 "fast"으로 변경할 수 있습니다 그래서 :

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

두 번째 질문에 대답하려면 .animate()에서 위로부터 아래로 슬라이드하는 것이 가능하다고 생각하지 않습니다. 그러나 .slideDown() 효과가 있습니다.

.slideDown() 메서드는 일치하는 요소의 높이를 애니메이션으로 나타냅니다. 이는 공개 항목

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

출처

2014-02-15 14:41:42 CRABOLO

이 모든 애니메이션을 빠르게하고있다 않는다는 것을 유일한 위해 길을 만들고, 아래로 슬라이드 페이지의 하부됩니다. 것은 내가 클릭하는 div가 다른 두 div보다 애니메이션에서 느리다는 것입니다. 따라서 중간 div를 클릭하면 해당 div 옆에있는 div는 중간 div가 중간에있을 때 애니메이션을 완료했습니다. 생기. –

음, 다른 것들은 "천천히"로 변경하거나 밀리 초 단위로 시간을 사용할 수 있습니다. 5000과 같이 5 초가됩니다. – CRABOLO

어떻게 할 수 있습니까? 그 코드 스 니펫 만 있습니다. 세 div의 애니메이션 속도가 같지 않아야합니까? –

jQuery 애니메이션 지연 (호버시)

답변

관련 문제