انیمیشن در جاوا اسکریپت

این تاپیک 2 پاسخ و 1 مشارکت کننده دارد . آخرین آپدیت توسط :  سعید ،‏ 1 سال و 3 ماه پیش .

این تاپیک تاکنون 355 بازدید داشته است .

نویسنده پست
چهار شنبه ، 12 آگوست 2015     9:45 ق.ظ #


سعید

Subscriber
161 پست35 تاپیک

سلام

من این کد رو نوشتم ولی یه مشکلی داره

<style>
@import url(http://cafe-beroz.ir/font/font.css?1.0);
body{font:14px yekan-joom}
#box{width:120;height:120px;position:absolute;border-radius:2.5em 1em 2.5em 1em/1em 2.5em 1em 2.5em;background:url(/img/code-tool.png)no-repeat;background-size:120px;overflow:hidden;z-index:1}
#box-1{width:120px;height:61px;position:absolute;top:-63;margin:auto;background:#000;opacity:0.5;border-bottom:2px solid #fff;}
#box-2{width:120;height:61px;position:absolute;bottom:-63;margin:auto;background:#000;opacity:0.5;border-top:2px solid #fff;}
.txt{text-align:center;font:14px/67px yekan-joom;color:#fff;margin:auto;transition:0.2s;cursor:pointer;}
.txt-{text-align:center;font:14px/60px yekan-joom;color:#fff;margin:auto;transition:0.2s;cursor:pointer;}
.txt:hover{color:#FBFF00;} .txt-:hover{color:#FBFF00;} .close:hover{color:#FBFF00;}
@keyframes box-1 {0%{top: -63px;}100%{top: -2px;}}
@keyframes box-2 {0%{bottom: -63px;}100%{bottom: -2px;}}
</style>
<div id="box" onmouseenter="ani1(),ani2()">
<div id="box-1"><div class="txt">توضیحات</div></div>
<div id="box-2"><div class="txt-">مشاهده</div></div>
</div>
<script>
var x = document.getElementById("box-1");
function ani1(){x.style.animation = "box-1 .28s";}
x.addEventListener("animationend", myEndFunction);
function myEndFunction(){this.style.top = "-2px";}
var y = document.getElementById("box-2");
function ani2(){y.style.animation = "box-2 .28s";}
y.addEventListener("animationend", myEndFunctiony);
function myEndFunctiony(){this.style.bottom = "-2px";}
</script>

مشکلش اینه که وقتی ماوس رو از box بیرون میکشم،box-1وbox-2 با اون افکتی که اومدن،با بر عکس همون افکت خارج نمی شن
چیکار کنم که با برعکس اون افکت خارج بشن؟

0  تشکر
پنجشنبه ، 13 آگوست 2015     2:00 ب.ظ #


سعید

Subscriber
161 پست35 تاپیک

خواهش می کنم جواب بدین

0  تشکر
پنجشنبه ، 20 آگوست 2015     3:43 ب.ظ #


سعید

Subscriber
161 پست35 تاپیک

خودم درستش کردم

0  تشکر
پست 1 تا 3 (از مجموع 3 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .