مشکل در انیمیشن جی کوئری

padidehco · بهمن 92

سلام دوستان
مشکل این کئ چیه؟
می خوام اون باکس دوم که به رنگ زرد هست 30 ثانیه به موقعیت top:70 بره و بعد از 30 ثانیه به مدت 50 ثانیه به موقعیت top:-10 بره
و این روند می خوام همین طور ادامه پیدا کنه
باید چی کار کنم؟

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
for(i=0;i<100;i++){
$("#box2z").animate({top:70},"slow");
$("#box2z").animate({top:-10},"slow");
}
});
</script>
</head>
<style>
#box2z{
background:#ffee00;
height: 71px;
left: 45px;
position: absolute;
top: -10px;
transform: scale(0.75);
transition: all 0.7s ease-in-out 0s;
width: 100px;
}
#box1z{
background:#e2e2e2;
height: 57px;
left: 50px;
position: absolute;
top: 8px;
width: 87px;
z-index: 1000;
opacity:.5;
}
#box1z:hover + #box2z{
top:70px;
}
</style>
<body>
<div id="stage201"><div id="box1z"></div><div id="box2z"></div></div>
</body>
</html>

مصطفی صفرعلی · بهمن 92

با سلام

به جای اینکه از جی کوئری استفاده کنید راه بهتر و ساده تری هم هست و اون اینکه از خواص CSS3 استفاده کنید

میتونید با استفاده از دستور keyframes الگویی را تعریف کنید منتهی چون نیاز به دو حرکت متفاوت دارید میبایست دو تا keyframes تعریف کنید

بعد برای هر الگو کافیست css های موردنظرتون رو تعریف کنید و با استفاده از خاصیت animation-duration نیز کنترل زمان را هم به دست بگیرید

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

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

http://www.w3schools.com/cssref/css3_pr_animation-duration.asp

موفق و پیروز باشید

یا حق

ورود

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

مشکل در انیمیشن جی کوئری

پست های پیشنهاد شده

padidehco 9

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست

فعالیت ها