koolfayfer

مهم
رویداد هاور و تکرار در جی کوئری

3 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام دوستان

این کد منه:

$(document).ready(function(e) {
		
        $(".box").hover(
		
			function(){
				$(".image").animate({bottom: "0px"});
			},
			function(){
				$(".image").animate({top: "0px"});
			}
		);
    });

 

 

 

 

یه باکس مربع در نظر بگیرید با کلس box

و یه باکس با کلس image به پهنای کلس box و ارتفاع دوبرابر که داخل کلس box می باشد

overflow تگ box مخفیه و در ابتدا نیمه بالایی تگ image رو می بینیم

که با هاور روی box نیمه پایینی image اسکرول بشه که بتونیم ببینیم...

 

 

 

 

بار اول هاور و آن هاور میشه اما دیگه این رویداد اتفاق نمی افته

مشکل از کجاست؟

ویرایش شده در توسط koolfayfer
0

به اشتراک گذاری این پست


لینک به پست
در 1 ساعت قبل، koolfayfer گفته است :

سلام دوستان

این کد منه:


$(document).ready(function(e) {
		
        $(".box").hover(
		
			function(){
				$(".image").animate({bottom: "0px"});
			},
			function(){
				$(".image").animate({top: "0px"});
			}
		);
    });

 

 

 

 

یه باکس مربع در نظر بگیرید با کلس box

و یه باکس با کلس image به پهنای کلس box و ارتفاع دوبرابر که داخل کلس box می باشد

overflow تگ box مخفیه و در ابتدا نیمه بالایی تگ image رو می بینیم

که با هاور روی box نیمه پایینی image اسکرول بشه که بتونیم ببینیم...

 

 

 

 

بار اول هاور و آن هاور میشه اما دیگه این رویداد اتفاق نمی افته

مشکل از کجاست؟

باسلام

شما باید addclass و removeclass کنید ، یعنی کلاسی که overflow مخفیه تبدیل بشه به کلاسی که overflow روی auto هست ، به مثال زیر توجه کنید

 jQuery(document).ready(function($) {
jQuery(".box" ).hover(
  function() {
    jQuery( this ).addClass( "imghover" );
  }, function() {
    jQuery( this ).removeClass( "imghover" );
  }
);
});

و در css اضافه کنید

.imghover{
      overflow: auto !important;
}

 

1

به اشتراک گذاری این پست


لینک به پست
در در 1/16/2017 at 16:50، nazanin123 گفته است :

باسلام

شما باید addclass و removeclass کنید ، یعنی کلاسی که overflow مخفیه تبدیل بشه به کلاسی که overflow روی auto هست ، به مثال زیر توجه کنید


 jQuery(document).ready(function($) {
jQuery(".box" ).hover(
  function() {
    jQuery( this ).addClass( "imghover" );
  }, function() {
    jQuery( this ).removeClass( "imghover" );
  }
);
});

و در css اضافه کنید


.imghover{
      overflow: auto !important;
}

 

من همچین چیزی میخوام:

http://gowebsite.ir/طراحی-سایت/Web-Design/مبلمان-و-دکوراسیون-پارچوب

 

اگه ارتفاع تمام عکسا یکسان باشه مشکلی نیست پوزیشن ابسولوت میدی با تاپ 0 پیکسل روی هاور تاپ رو میدی مثلا 1500 پکسل

اما اگه ارتفاع عکس یه نمونه ای 500 پیکسل باشه ، 1000 پیکسل جابجایی اضافی داریم

 

و اگه بخوام برای هاور از تاپ 1500 پیکسل استفاده نکنیم و از bottom صفر پیکسل استفاده کنیم هیچ مشکلی برای عکسای مختلف نداریم و موقع هاور آخر عکس رو میبینیم اما مشکلی که هست برای این تکنیک دیگه ترنزیشن عمل نمیکنه و پرش میکنه به آخر و کاربر کل عکس رو در حالت یه اسلایدر نمی بینه

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط sydvza
      باسلام و خسته نباشید خدمت دوستان عزیز سرعت سایت من کند شده از نظر گوگل آیا راهکار های برای بهبود آن دارید؟ لطفا پیشنهاد دهید
      این لینک سایت من جهت بررسی می باشد.
      https://aryalogo.com
      از نظر گوگل اسپید متاسفانه سرعت سایتم رتبه خوبی نداره خواهشمند هستم راهکارهایی ارائه دهید تا مشکل من برطرف شود.
    • توسط ashkan91
      با سلام و خسته نباشید
      موضوع: تغییر دادن رنگ قسمتهای مختلف بدنه یک سایت بدون استفاده از بخش css اضافی وردپرس
      من یک سایت دارم که از یک قالب مادر ارث میبرد . وقتی از قسمت ویرایشگر وردپرس قالب سایتم وارد بخش CSS پوسته مادر سایتم میشوم و اقدام به تغییر کد رنگ قسمتهای مختلف سایتم میکنم متاسفانه رنگ آن قسمتهای مذکور تغییر نمی کند و همچنان قسمتهای مذکور برنگ خودشان هستند علت چه هست؟ و آیا تنظیم جای دیگری را نیز باید تغییر داد یا خیر؟
      حاوی اسکرینشات
       

    • توسط unid_user
      سلام و درود
      دوستان گرامی من با تابع addclass در جی کوئری به مشکل خوردم. می خوام کلاس buy-butt رو به یک تگ a خاص اضافه کنم اما جواب نمیده!؟
      $( ".package-info .textwidget p a" ).addClass( "buy-butt" );  
    • توسط unid_user
      سلام و درود
      دوستان من یه سری کد نوشتم که توی یه گالری تصاویر استفاده میشه. متاسفانه برای هر تصویر باید این کدها تکرار بشه و خوب توی داینامیک کردن با وردپرس قطعا به مشکل میخورم. می خواستم بدونم راهی وجود داره که من این کدهای جی کوئری رو طوری بنویسم که با اضافه کردن هر توصویر کدهای جی کوئری رو اتوماتیک اضافه کنه؟
      ممنون.
      کدهای html:
      <table id="gallery"> <tr> <td> <div class="image"> <img src="images/img1.jpg" alt="" id="img1"> </div> </td> <td> <div class="image"> <img src="images/img2.jpg" alt="" id="img2"> </div> </td> <td> <div class="image"> <img src="images/img3.jpg" alt="" id="img3"> </div> </td> </tr> <tr> <td> <div class="image"> <img src="images/img4.jpg" alt="" id="img4"> </div> </td> <td> <div class="image"> <img src="images/img5.jpg" alt="" id="img5"> </div> </td> <td> <div class="image"> <img src="images/img6.jpg" alt="" id="img6"> </div> </td> </tr> </table> <div id="bigimage"> <div id="close"></div> <img src="" alt=""> <div id="next"></div> <div id="prev"></div> </div> کدهای css:
      .image:hover { cursor: pointer; } .image img { border: 2px solid #333; border-radius: 5px; } .image:hover img { transform: scale(0.98); } #bigimage { height: 100vh; width: 100%; background-color: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; display: none; } #bigimage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; } #bigimage #close { height: 40px; width: 45px; position: sticky; top: 30px; right: 40px; background: transparent url('../images/cancel.png') no-repeat center center /contain; background-size: 24px; } #bigimage #close:hover { cursor: pointer; } #next { height: 100px; width: 30px; background: transparent url('../images/arrow_right.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } #next:hover { cursor: pointer; } #prev { height: 100px; width: 30px; background: transparent url('../images/arrow_left.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } #prev:hover { cursor: pointer; کدهای جی کوئری:
      $(document).ready(function() { flag=0; $("#img1").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; }); $("#img2").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; }); $("#img3").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; }); $("#img4").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; }); $("#img5").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; }); $("#img6").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; }); $("#close").click(function() { $("#bigimage").fadeOut(); }); $("#next").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=2; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=3; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=4; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=5; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=6; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=1; } }); $("#prev").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; } }); });  

    • توسط 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