ورود

View Full Version : سوال: معادلی برای transition


bftarane
شنبه 02 آذر 1392, 20:51 عصر
سلام.
این افکتی که برای عکس اول از سمت چپ توسط css3 انجام شده رو آیا می شه با jquery یا جاوااسکریپت معادل سازی کرد؟
http://designshack.net/tutorialexamples/imagehovers/index.html
یعنی با hover روی عکس با یه حالت خیلی آروم عکس بزرگتر بشه.

ممنون می شم راهنمایی کنید.
مخصوصاً اگه آموزشی در این زمینه سراغ دارید ممنونم می شم معرفی کنید.
2undercover
شنبه 02 آذر 1392, 21:09 عصر
بله میشه:


$('img').animate({width: '400px', height: '400px'});
bftarane
یک شنبه 03 آذر 1392, 08:56 صبح
ممنون به این صورت درست شد:

<script>
$(document).ready(function () {
$("#imgname").mouseover(function () {
$("#imgname").animate({ width: '400px', height: '400px' });
});
$("#imgname").mouseout(function () {
$("#imgname").animate({ width: '200px', height: '200px' });
});


});
</script>
حالا اگه فرضاً n تا عکس در صفحه باشه که تعداد رو ندونیم و بخواهیم روی هر عکسی که hover شد این افکت براش انجام بشه چطور می شه این کار رو انجام داد؟
من با کدهای زیر این کار رو انجام دادم ولی یکی از مشکلاتم اینه که فرضاً ابتدا عکسها هم هم قد و در یک راستا هستن وقتی روی یکی از عکس ها hover می شه اون عکس بزرگ می شه و همزمان عکس های دیگه هم پایین تر می یان از جاشون. چطور میشه کاری کرد که بقیه عکس ها سر جاشون fix بمونن؟

<script>
$(document).ready(function () {

$('#father img').each(function () {
$(this).mouseover(function () {
$(this).animate({ width: '200px', height: '200px' }, "slow");
});
$(this).mouseout(function () {
$(this).animate({ width: '100px', height: '100px' }, "slow");
});
});


});
</script>
مشکل دیگش هم اینه که وقتی سریع و با فاصله کوتاه زمانی روی همه عکس ها hover بشه و موس رها بشه انیمیشن مذکور پشت سر هم انجام می شه و یه حالت بدی پیش می یاد.
یه فایل رو هم ضمیمه کردم لطفاً راهنمایی کنید.
اگه Tutorial ای در این زمینه سراغ دارید ممنون می شم معرفی کنید.
jalil_gh
یک شنبه 03 آذر 1392, 11:53 صبح
شما برای اینکه برای همه تصاویر رویداد تعریف کنید نیازی به استفاده از every ندارید. خود جی‌کوئری این کار رو براتون انجام میده. در ضمن شما میتونید از hover هم استفاده کنید.
یه راه حل برای دو تا مشکل شما میتونه این باشه.
اول همه تصاویر رو داخل یک div بزارید و استایل‌های لازم رو بهش بدید.
برای اینکه انیمیشن متوقف بشه هم میتونید از متد stop استفاده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#father {
display: block;
position: relative;
}
#father div {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
}

#father div img {
position: absolute;
}
</style>
<script src="../lib/jquery.js"></script>
<script>
$(document).ready(function () {

$('#father img').hover(
function() {
$(this).stop(true, false).animate({ width: '200px', height: '200px' }, "slow");
},
function() {
$(this).stop(true, false).animate({ width: '100px', height: '100px' }, "slow");
}
);

});
</script>
</head>
<body>

<div id="father" style="width:700px; margin:0 auto;">
<div><img id="imgname" src="Images/border.gif" width="100" height="100" /></div>
<div><img id="img1" src="Images/border.gif" width="100" height="100" /></div>
<div><img id="img2" src="Images/border.gif" width="100" height="100" /></div>
</div>

</body>
</html>
البته مشکلی که الان داره اینه که بعضی از تصاویر پشت سر بعضی دیگه قرار میگرن که احتمالا بشه با z-index این مشکل رو حل کرد.