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

[niwanta 8]

سلام دوستان

این کد منه:

$(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 اسکرول بشه که بتونیم ببینیم...

 

 

 

 

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

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

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

[Monica 322]

در 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;
}

 

[niwanta 8]

در در 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 صفر پیکسل استفاده کنیم هیچ مشکلی برای عکسای مختلف نداریم و موقع هاور آخر عکس رو میبینیم اما مشکلی که هست برای این تکنیک دیگه ترنزیشن عمل نمیکنه و پرش میکنه به آخر و کاربر کل عکس رو در حالت یه اسلایدر نمی بینه