表題の件に関して下記アドレスに「isotope」というjqueryのプラグインを使用して、フィルター「ALL,house,clinic,other」等で表示の仕分けが出来るサイトを構築しております。
http://staging.alitomo.com/form/gallery/
いつもではないのですが、整列アニメーションの際に終了間際に小刻みに揺れる現象が出てしまいます。
※ALLを押した後、houseやclinicを押すとよく出ます。
※またこの減少はPCで発生するのですが、アンドロイド等のスマートフォンでは発生しません。
こちらの小刻みに揺れる現象をどうにかしたいのですが、どうにも分かりません。
ご教授いただければ幸いです。
html
1<div class="gallery archive fix_mt" style="margin-top: 104px;"> 2 <h2 class="f_rl">gallery</h2> 3 <div class="iso_btn f_rl"> 4 <button class="all button" data-filter="*">all</button><button id="house" class="button is-checked" data-filter=".house">house</button><button id="clinic" class="button" data-filter=".clinic">clinic</button><button id="other" class="button" data-filter=".other">other</button> 5 </div> 6 <div class="gallery_box" > 7 <a class="th_box house" href="http://staging.alitomo.com/form/gallery/kadotayashiki-1-house/" ><img src="http://staging.alitomo.com/form/wp-content/uploads/2019/12/10.jpg"></a> 8 9 ・・・・ 10 <a class="th_box house" href="http://staging.alitomo.com/form/gallery/kadotayashiki-1-house/" ><img src="http://staging.alitomo.com/form/wp-content/uploads/2019/12/10.jpg"></a> 11 </div> 12</div>
js
1// filter items on button click 2$('.iso_btn').on( 'click', 'button', function() { 3 var filterValue = $(this).attr('data-filter'); 4 $container.isotope({ filter: filterValue }); 5 $('.iso_btn button').removeClass('is-checked'); 6 $(this).addClass('is-checked'); 7 //console.log(filterValue); 8}); 9 10 11// init Isotope 12var $container = $('.gallery_box'); 13 $container.imagesLoaded(function(){ 14 $container.isotope({ 15 itemSelector: '.th_box', 16 transitionDuration: '0.5s', 17 }); 18 19}); 20
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/07 07:02