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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی، می خوام با کلیک کردن روی یه تگ a هر بار سه تا از تگ های div که کلاس items رو دارن نمایش داده بشه یا به اصطلاح laod بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.
      <nav> <ul id="first-ul"> <li> <a>صفحه اصلی</a> </li> <li> <a>خدمات</a> <ul class="second-ul"> <li> <a>آموزش رباتیک</a> </li> <li> <a>طراحی و ساخت ربات</a> </li> </ul> </li> <li> <a>محصولات</a> <ul class="second-ul"> <li> <a>ربات مسیریاب</a> </li> <li> <a>ربات حل ماز</a> </li> </ul> </li> </ul> </nav> با تشکر و سپاس
    • توسط jistili1
      سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.
      این کد جی کوئری من هست:
      $("#select").change(function(){ if($(this).val()=="empty"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="localref"){ $("#date").css("display","hidden"); $("#localref").css("display","block"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="date"){ $("#date").css("display","block"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="price"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","block"); } if($(this).val()=="number"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","block"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="product"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","block"); $("#price").css("display","hidden"); } if($(this).val()=="refid"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","block"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } }); حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، نمیدونم چرا وقتی صفحه مرورگر رو رفرش میکنم، تمام زیر منوها دیده میشه! کسی میدونه علت چیه.
      با اینکه من تگ ul رو diplay: none دادم.
      با تشکر و سپاس