استفاده از css ترانزیشن هنگام اجرا جی کوئری

این تاپیک 7 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  s.alifarrokh ،‏ 2 سال و 3 ماه پیش .

این تاپیک تاکنون 660 بازدید داشته است .

نویسنده پست
سه شنبه ، 12 آگوست 2014     4:12 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

سلام

من یه عنصر دارم که با جی کوئری قراره ارتفاع اون تعیین بشه و بعد داخل یه تابع نوشتم که ارتفاع اون تغییر کنه.

حالا میخوم بدونم چجوری میتونم کاری کنم که هر وقت تابع فراخوانی شد این تغییر ارتفاع با استفاده از css ترانزیشن انجام بشه؟؟

ممنون میشم کمکم کنید.

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
سه شنبه ، 12 آگوست 2014     5:59 ب.ظ #


محمد مهدی اکرمی

Subscriber
605 پست28 تاپیک

سلام دوست عزیز

شما باید css ترانزیشن رو در css مربوط به  همون تگی که قرار ارتفاع تغییر کنه قرار بدید.

موفق باشید

1  تشکر
سه شنبه ، 12 آگوست 2014     6:05 ب.ظ # پاسخ تائید شده توسط سوال کننده


محمد مهدی اکرمی

Subscriber
605 پست28 تاپیک

راستی از اون جایی که دارید از jQuery استفاده می کنید متدی در jQuery  به نام animate  وجود داره که کار css ترانزیشن خودش انجام میده و به صورت یک افکت نرم  کد هاتون رو اجرا میکنه . توضیحات کامل تر در خود سایت jQuery همراه با مثال در آدرس زیر است :
متد animate. در jQuery 
بازم موفق باشید :)

1  تشکر
سه شنبه ، 12 آگوست 2014     6:05 ب.ظ #


حامد مودی

Subscriber
VIP
147 پست40 تاپیک

سلام دوست عزیز

ساده ست فقط کافیه یه کلاس مثلا moving تو css تعریف کنی و بهش استایل و transitioin بدی . بعد از کد زیر استفاده کنی.

اینطوری وقتی کلاس به عنصر اضافه میشه چون transition داره آروم تغییرات کلاست اعمال میشه و بالعکس:

0  تشکر
سه شنبه ، 12 آگوست 2014     6:16 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

من برای اون عنصرم این کارو کردم ولی با ترانزیشن تغییر نمیکنه!!!

کد html و css

بازی

کامپیوتر
مک
اندروید
ویندوز فون
جاوا

.cats {
transition-duration:0.7;
}

کد جی کوئری و جاوا

$(window).load(function(){
$('#cats1').height(40);
});
function cats1(){
cats1height = $('#cats1').height();
smallcats1height = $('#smallcats1').height();
cats1 = smallcats1height + cats1height;
if (cats1height == 40) {
$('#cats1').height(cats1);
}
}

0  تشکر
سه شنبه ، 12 آگوست 2014     6:17 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

<div class="cats" id="cats1">
<div class="cats-holder">
<div class="big-cat" onClick="cats1()" id="bigcats1">
بازی
</div>
<div class="small-cats" id="smallcats1">
<ul>
<li><a rel="nofollow" href="">کامپیوتر</a></li>
<li><a rel="nofollow" href="">مک</a></li>
<li><a rel="nofollow" href="">اندروید</a></li>
<li><a rel="nofollow" href="">ویندوز فون</a></li>
<li><a rel="nofollow" href="">جاوا</a></li>
</ul>
</div>
</div>
</div>
<style>
.cats {
transition-duration:0.7;
}
</style>
<script>
$(window).load(function(){
$('#cats1').height(40);
});
function cats1(){
cats1height = $('#cats1').height();
smallcats1height = $('#smallcats1').height();
cats1 = smallcats1height + cats1height;
if (cats1height == 40) {
$('#cats1').height(cats1);
}
}
</script>

0  تشکر
سه شنبه ، 12 آگوست 2014     6:18 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

ای بابا چرا این مدلی کپی میشه!!!

ببخشید.فایل پیوست شد.

پیوست ها:
You must be logged in to view attached files.
0  تشکر
سه شنبه ، 12 آگوست 2014     6:39 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

ممنون.اان مشکلم حل شد.

0  تشکر
پست 1 تا 8 (از مجموع 8 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .