백그라운드 그라디언트, 마우스 오버시 질문입니다.
본문
안녕하세요. 자바스크립트 초보유저입니다.
현재 코드를 짜는중인데..
css
.s3_card_navbox{
width: 25%;
height: 160px;
padding: 0 30px;
background: #fff;
background: -moz-linear-gradient(45deg, #fff 0%, #fff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #fff 0%,#fff 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(45deg, #fff 0%,#fff 100%);
background: linear-gradient(45deg, #fff 0%,#fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: 0px 0px 10px rgba(51, 60, 64, 0.58);
-moz-box-shadow: 0px 0px 10px rgba(51, 60, 64, 0.58);
-o-box-shadow: 0px 0px 10px rgba(51, 60, 64, 0.58);
box-shadow: 0px 0px 10px rgba(51, 60, 64, 0.58);
position: relative;
float: left;
z-index: 2;
top: 110px;
transform: translateY(-50%);
left: 25px;
transition: all 0.5s;
/* background-position-x: 0%;
background-position-y: 0%; */
}
.s3_card_navbox:hover{
background: #89f7fe; /* Old browsers */
background: -moz-linear-gradient(45deg, #89f7fe 0%, #66a6ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%);
background: linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89f7fe', endColorstr='#66a6ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
script
<script>
$(function(){
$(".s3_card_navbox").mouseover(function(){
$(this).animate({
'background-position-x': '100%',
'background-position-y': '20%'
},500,'linear');
});
});
</script>
이렇게 해보았는데 호버시 부드러운 애니메이션이 되지않습니다..
1. 사실은 저는 transition all 0.4s; << 이것이 먹히지 않아 다른방법을 모색중입니다.
혹시.. 부드럽게 나타날수있는 방법이 있습니까?
2. 1번이 되지 않는다면, 이동을 하면서 나타나게 하고싶습니다
방법이있을까요?
답변을 작성하시기 전에 로그인 해주세요.
