رفتن به مطلب

مشکل با اجرا نشدن جی کوئری


پست های پیشنهاد شده

سلام و دورود

دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟

ممنون

کد جاوا اسکریپت:

$(document).ready(function(){
  $("a:nth-child(1)").css("background-color","white");
  $("#circle1").click(function(){
    $("#slider").animate({'left':'5%'},500);
    $("#data").fadeIn(700);
    $("#data2,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'60%'});
    $("a:nth-child(1)").css("background-color","white");
    $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle2").click(function(){
    $("#slider").animate({'left':'-30%'},500);
    $("#data2").fadeIn(700);
    $("#data,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(2)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle3").click(function(){
    $("#slider").animate({'left':'-190%'},500);
    $("#data3").fadeIn(700);
    $("#data,#data2,#data4").fadeOut(500);
    $(".line").animate({'left':'55%'});
    $("a:nth-child(3)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
  });
  $("#circle4").click(function(){
    $("#slider").animate({'left':'-240%'},500);
    $("#data4").fadeIn(700);
    $("#data,#data2,#data3").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(4)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
  });
});

 

site_4.zip

ویرایش شده توسط unid_user
لینک به ارسال
در 2 دقیقه قبل، mehran-b گفته است :

سلام و درود @unid_user

 

توی کنسول مرورگر خطایی نشون نمیده؟

نه. فایل رو پیوست کردم اگه نیاز هست بررسی میکنید لطفا؟

لینک به ارسال
در 20 دقیقه قبل، unid_user گفته است :

سلام و دورود

دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟

ممنون

کد جاوا اسکریپت:


$(document).ready(function(){
  $("a:nth-child(1)").css("background-color","white");
  $("#circle1").click(function(){
    $("#slider").animate({'left':'5%'},500);
    $("#data").fadeIn(700);
    $("#data2,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'60%'});
    $("a:nth-child(1)").css("background-color","white");
    $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle2").click(function(){
    $("#slider").animate({'left':'-30%'},500);
    $("#data2").fadeIn(700);
    $("#data,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(2)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle3").click(function(){
    $("#slider").animate({'left':'-190%'},500);
    $("#data3").fadeIn(700);
    $("#data,#data2,#data4").fadeOut(500);
    $(".line").animate({'left':'55%'});
    $("a:nth-child(3)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
  });
  $("#circle4").click(function(){
    $("#slider").animate({'left':'-240%'},500);
    $("#data4").fadeIn(700);
    $("#data,#data2,#data3").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(4)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
  });
});

 

site_4.zip

وقت بخیر

کد جاواتونو در تگ head صدا کردین؟

لینک به ارسال

توی codepen تست میکنم درسته!؟ بنظرتون علتش چی میتونه باشه که توی سیستم خودم نمیاد؟

لینک به ارسال
در هم اکنون، miladalizadeh گفته است :

وقت بخیر

کد جاواتونو در تگ head صدا کردین؟

نه بخشی رو توی فایل جدا و بخش هم پیش از تگ بسته body

لینک به ارسال
در 7 دقیقه قبل، unid_user گفته است :

نه. فایل رو پیوست کردم اگه نیاز هست بررسی میکنید لطفا؟

شما از ورژن Slim جی کوئری استفاده کردید که بخش AJAX و افکت ها رو نداره.

از ورژن اصلی استفاده کنید.

 

موفق باشید

لینک به ارسال
در هم اکنون، mehran-b گفته است :

شما از ورژن Slim جی کوئری استفاده کردید که بخش AJAX و افکت ها رو نداره.

از ورژن اصلی استفاده کنید.

 

موفق باشید

از خود سایت جی کوئری گرفتم همین بود. لینک درستش رو میشه ارسال کنید؟

لینک به ارسال
<script>
      var l1=$("#d");
      var l2=$("#a");
      var l3=$("#f");
      var l4=$("#t");

      var layer=$("#main");

      layer.mousemove(function(e) {
        var valuex=(e.pageX * -1 / 40);

        l1.css({'background-position':(valuex-200)+''+0});
        l2.css({'background-position':(valuex)+''+0});
        l3.css({'background-position':(valuex-200)+''+0});
        l4.css({'background-position':(valuex+600)+''+0});
      });
    </script>

حالا فقط بخش آخر مونده. کدهای جاوا اسکریپتی که پیش از تگ body گذاشتم کار نمیکنه. مربوط به mousemove هست. این کدها رو درون تگ head هم گذاشتم تغییری نکرد.

ویرایش شده توسط unid_user
لینک به ارسال
در 9 دقیقه قبل، unid_user گفته است :

حالا فقط بخش آخر مونده. کدهای جاوا اسکریپتی که پیش از تگ body گذاشتم کار نمیکنه. مربوط به mousemove هست. این کدها رو درون تگ head هم گذاشتم تغییری نکرد.

نفهمیدم دقیقا باید چی بشه ولی توی این 4 تا:

l1.css({'background-position':(valuex-200)+''+0});
l2.css({'background-position':(valuex)+''+0});
l3.css({'background-position':(valuex-200)+''+0});
l4.css({'background-position':(valuex+600)+''+0});

background-position واحدش وارد نشده.

لینک به ارسال
در هم اکنون، mehran-b گفته است :

نفهمیدم دقیقا باید چی بشه ولی توی این 4 تا:


l1.css({'background-position':(valuex-200)+''+0});
l2.css({'background-position':(valuex)+''+0});
l3.css({'background-position':(valuex-200)+''+0});
l4.css({'background-position':(valuex+600)+''+0});

background-position واحدش وارد نشده.

نباید واحد وارد بشه چون اینها فقط یه عدد هستند برای محاسبات. این برای این هست که وقتی موس رو حرکت میدیم position پس زمینه حرکت کنه.

لینک به ارسال
در 10 دقیقه قبل، unid_user گفته است :

نباید واحد وارد بشه چون اینها فقط یه عدد هستند برای محاسبات. این برای این هست که وقتی موس رو حرکت میدیم position پس زمینه حرکت کنه.

وقتی عدد وارد بشه جلوی background-position بدون واحد غیر معتبر میشه.

مثلا

background-position: 50 150;

عبارات بالا کاملا برای CSS بی معنیه چون واحد نداره. باید به شکل زیر باشه:

background-position: 50px 150px;

 

لینک به ارسال
در 1 دقیقه قبل، mehran-b گفته است :

وقتی عدد وارد بشه جلوی background-position بدون واحد غیر معتبر میشه.

مثلا


background-position: 50 150;

عبارات بالا کاملا برای CSS بی معنیه چون واحد نداره. باید به شکل زیر باشه:


background-position: 50px 150px;

 

من یه کد دیگه رو امتحان کردم که کار میکنه اما میخوام دقیقا از همون کد قبلی استفاده کنم. این پروژه بر اساس یک ویدئو آموزشی هست و دقیقا همون ترتیب رو رعایت کردم.

کدی که خودم نوشتم و کار میکنه:

$("#d").mousemove(function(event) {
    $("#d").css("background-position","100px");
  });
  $("#d").mouseleave(function(event) {
    $("#d").css("background-position","-200px");
  });

 

لینک به ارسال
در 2 دقیقه قبل، unid_user گفته است :

من یه کد دیگه رو امتحان کردم که کار میکنه اما میخوام دقیقا از همون کد قبلی استفاده کنم. این پروژه بر اساس یک ویدئو آموزشی هست و دقیقا همون ترتیب رو رعایت کردم.

خوب کد خودت واحد داره کار میکنه اونا واحد نداره کار نمیکنه.

کدها رو اینطوری کن:

l1.css({'background-position':(valuex-200)+'px '+'0px'});
l2.css({'background-position':(valuex)+'px '+'0px'});
l3.css({'background-position':(valuex-200)+'px '+'0px'});
l4.css({'background-position':(valuex+600)+'px '+'0px'});

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...