PDA

View Full Version : سوال: یه سوال از slide down و slide up


abbas27
چهارشنبه 09 مهر 1393, 20:45 عصر
سلام دوستان گرامی
یه div دارم که داخلش یه عکس قرار داره.حالا میخوام وقتی ماوس روی div قرار گرفت چند پیکسل به سمت پایین بیاد و هر وقت موس از رو div خارج شد برگرده به جای اولش.-ضمنا مبتدی هستم هر چی گشتم چیز مناسبی گیر نیاوردم.ذوستان لطف کنن اگه کمکی از دستشون بر میاد کد رو با توضیح بذارن.ممنون
abbas27
پنج شنبه 10 مهر 1393, 20:02 عصر
یکی کمک کنه.اعصابم خورد شد بس که نشسم واسه این سوالم کد تست کردم
Rejnev
پنج شنبه 10 مهر 1393, 20:18 عصر
<html>
<head>
<style>
.mydiv {margin-top:0; transition:all 300ms;}
.mydiv:hover {margin-top:10px;}
</style>
</head>


<body>
<div class='mydiv'>
<img src='01.jpg'/>
</div>
</body>


</html>

transition:all یعنی این که هر تغییری از لحاظ ظاهری یا موقعیتی روی کلاس مورد نظر افتاد بصورت انیمیشن رخ بده (طی 400 میلی ثانیه)
:hover یعنی وقتی موس روی تگی که کلاس mydiv رو داره قرار گرفت اون استایل ها بهش نسبت داده بشه.
Rejnev
پنج شنبه 10 مهر 1393, 21:00 عصر
اینم نسخه جی کوئریش:


<html>
<head>
<script src='jquery.js'></script>
<style>
.divmain{transition:all 400ms;margin-top:0;}
.clicked{margin-top:20px;}
</style>
</head>
<body>
<div class='divmain'>
<img src='01.jpg'/>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.divmain').click(function(){
jQuery(this).addClass('clicked');
}).mouseleave(function(){
jQuery(this).removeClass('clicked');
});
});
</script>
</body>
</html>