padidehco 9 ارسال شده در بهمن 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> نقل قول به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر
مصطفی صفرعلی 2,891 ارسال شده در بهمن 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 موفق و پیروز باشید یا حق 1 واکنش ها : padidehco نقل قول به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر
