حرکت راست به چپ کلمه ها

[meysam.moh]

سلام


چطوری میشه داخل جی کوئری وقتی داخل تگ های li مقدار هست ( منو های سمت راست و چپ ). وقتی موس روی این نوشته ها اومد کلمه های این تگا کمی از سمت راست بیاد به چپ و موس برداشته شد بیاد سر جای خودش؟

[tux-world]

$('ID_NAME').hover(function{ $(this).css({'padding-left' : '10px'}); });

[e107365]

این کمک میکنه:

$("ul#menu li a").hover(function(){
$(this).animate({"padding-right": "33px"}, 500, 'easeInCubic');
}, function() {
$(this).animate({"padding-right": "23px"}, 500, 'easeOutElastic');
});

این دستور 10 پیکسل میبره چپ و وقتی موس رو برداشتی برمی گردونه سر جاش.
دقت کن که به تگ a صفت display: block نداده باشی و یا بهش عرض نداده باشی. چون منو میریزه به هم با این انیمیشن. esdInCubic و easeOutElastic انیمیشن خاص میدن به حرکت. از پلاگین easing برای فعال شدنشون استفاده باید بکنی.
امیدوارم مفید باشه.

[tux-world]

کد توسعه داده شده بالا:
$("ul#menu li a").hover(function(){
$(this).stop().animate({ left: +10 }, 'fast');
}, function() {
$(this).stop().animate({ right: -10 }, 'fast');
});

[e107365]

اگه بخواین این کد رو استفاده بکنین، باید که a رو position: absolute بزنی. در این صورت ممکنه تو ie6 دچار مشکلاتی بشی. مخصوصا اگه که توی a عکس هم قرار بدی. و باید li رو position: relative.
البته بدون اینا هم جی کوئری از همون جا که a قرار داره موقعیت رو حساب می کنه. ولی ممکنه با تغییر اندازه مرورگر، a دگ نشون داده نشه.
stop رو خوب اومدی.
(این کد کار نخواهد کرد. چون باید همون left رو که +10 کردی همون left رو -10 کنی.)

[tux-world]

درسته. سریع نوشتم اشتباه کردم راس میگی.
اصلاحش کردم اینطوری شد:
$("ul#menu li a").hover(function(){
$(this).stop().animate({ left: +10 }, 'fast');
}, function() {
$(this).stop().animate({ left: -10 }, 'fast');
});


خودم از این کد برای تولتیپ استفاده میکنم. البته ie تا الان نه داشتم و نه استفاده کردم برای همین نمیدونم واکنشش چجوریه