تغیر تصویر با jquery و animation

[crafcrab]

با سلام
من یک کد دارم تو jquery که با اون میشه src یک img رو تغییر داد به صورت زیر :

jQuery("#id").attr('src','pic.jpg');

حالا من میخوام با کمک تابع animation با افکت و آرام آرام تصویر عوض شه (فقط هم با animation میخوام این کار بکنم نه fadein و...)

$("#id").animate({src: "pic.jpg",}, "slow" );

اما کار نمیکنه کجاش غلطه ؟

[hakim22]

دستور attr مقدار src رو تغییر میده ولی DOM در همون لحظه بروز نمیشه. بهترین راه اینه که همه ی عکسها رو با تگ img در صفحه بیارید و اونهایی که نمیخواهید دیده شوند با استایل display:none علامت بزنید.

بعدا با fadeIn یا Show و ... میتوانید آنهایی که پنهان هستند نمایش دهید.

[mehdi.mousavi]

با سلام من یک کد دارم تو jquery که با اون میشه src یک img رو تغییر داد به صورت زیر :

jQuery("#id").attr('src','pic.jpg');

حالا من میخوام با کمک تابع animation با افکت و آرام آرام تصویر عوض شه (فقط هم با animation میخوام این کار بکنم نه fadein و...)

$("#id").animate({src: "pic.jpg",}, "slow" );

اما کار نمیکنه کجاش غلطه ؟

سلام.
باید بدین شکل عمل کنید:

<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('#img').delay(1000).fadeOut('slow', function() {
$(this).load(function() {
$(this).fadeIn();
}).attr("src", "http://www.gelaskins.com/images/artworkImages/max-800x800/562.jpg");
});
});
</script>
<img id="img" src="https://www.google.com/images/srpr/logo4w.png" />



در واقع، اینجا دارم میگم وقتی تصویر fadeOut شد، تصویر دوم پس از load شدن، fadeIn بشه. بعدش، src تصویر اول رو عوض می کنم تا پس از اتمام دریافت فایل دوم، تابع load بطور خودکار call بشه...

موفق باشید.

[azamicu]

وقتی آدرس رو عوض کردی سریع بدون delay محفیش کن و بعد fadeIn کن

[mehdi.mousavi]

وقتی آدرس رو عوض کردی سریع بدون delay محفیش کن و بعد fadeIn کن

وقتی آدرس رو تغییر میدید، می تونید image رو "سریع" مخفی کنید، اما تا قبل از load کامل image از سرور، نباید اونو fadeIn کنید.
همزمانی انجام این عملیات بسیار حائز اهمیت هستش که در نهایت، به همون کدی میرسید که در فوق بهش اشاره کردم.

موفق باشید.

[crafcrab]

ممنون از دوستان ولی من میخواستم در غالب تابع animate این کار را انجام بدم نمیشه؟

[mehdi.mousavi]

ممنون از دوستان ولی من میخواستم در غالب تابع animate این کار را انجام بدم نمیشه؟

سلام.
کافیه تا جای fadeIn (در کد فوق) از animate استفاده کنید تا به هدفتون برسید.

موفق باشید.