[英]how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?
[英]How to Smooth out an Animation for jQuery Filter System
因此,我一直在研究一個過濾器系統,該系統允許我使用phpFlickr作為CodeIgniter中的庫來顯示Flickr API中的數據。 目前,我的動畫效果不錯,並且可以完全正常運行,盡管動畫不在我想要的位置。 我遇到的問題是,當我將內容切換到另一組圖像時,該圖像會跳動到位並且沒有平滑的動畫。 我不確定最好的方法是使用哪種動畫,因為我對動畫還很陌生。 另外,如果我有方法可以清理代碼,那將是很棒的。 這是我的代碼。
控制者
$sets = $this->phpflickr->photosets_getList('66096679@N07');
$recent = $this->phpflickr->photos_search(array('privacy_filter' => 5, 'user_id' => '66096679@N07'));
foreach ($sets['photoset'] as $key => $value) {
$setid = $value['id'];
$photos_in_set = $this->phpflickr->photosets_getPhotos($setid, 'original_format', NULL);
$set_array[$key] = str_replace(' ', '-', $value['title']);
foreach ($photos_in_set['photoset']['photo'] as $key2 => $value2) {
$photo_array[$key][$key2]['set'] = str_replace(' ', '-', $value['title']);
$photo_array[$key][$key2]['title'] = $value2['title'];
$photo_array[$key][$key2]['photo_url_thumb'] = $this->phpflickr->buildPhotoURL($value2, "large");
$photo_array[$key][$key2]['photo_url_large'] = $this->phpflickr->buildPhotoURL($value2, "original");
}
}
$data['photos'] = array_reverse($photo_array);
$data['sets'] = $set_array;
視圖
<div id="filter">
<a href="#" data-id="show-all" onclick="return false">All</a>
<?php foreach($sets as $key => $value): ?>
<a href="#" data-id="<?= $value ?>" onclick="return false"><?= str_replace('-', ' ', $value) ?></a>
<?php endforeach; ?>
</div>
<section id="photos">
<?php foreach($photos as $photoset): ?>
<?php foreach($photoset as $key): ?>
<a class="fancybox-media" href="<?= str_replace('http:', '',$key['photo_url_large']) ?>" data-filter="<?= $key['set'] ?>">
<img src="<?= str_replace('http:', '', $key['photo_url_thumb']) ?>" />
</a>
<?php endforeach; ?>
<?php endforeach; ?>
</section>
Java腳本
$(document).ready(function(){
$( '#filter a' ).click(function() {
var set = $(this).data('id');
$("#photos a[data-filter='"+ set +"']").fadeIn('20');
$("#photos a[data-filter!='"+ set +"']").fadeOut('0');
if($(this).data('id') === 'show-all') {
$('#photos a'). fadeIn('20');
}
});
});
這是上述代碼的實時示例的鏈接 。 如果可以幫助我使動畫變得平滑,將不勝感激。 就數據的設置方式而言,這似乎是最好的方法,因為所有圖像均被列為私有圖像,因此只能在網站上使用。 任何幫助或指導都將不勝感激,僅此而已。 如果您對此有任何疑問,我非常樂意相應地更新我的問題。 非常感謝您的事先幫助!
找出下面更平滑的圖像動畫代碼
Java腳本
$( '#filter a' ).click(function() {
var set = $(this).data('id');
$("#photos a[data-filter='"+ set +"']").addClass('in');
$("#photos a[data-filter='"+ set +"']").removeClass('out hidden');
$("#photos a[data-filter!='"+ set +"']").addClass('out hidden');
$("#photos a[data-filter!='"+ set +"']").removeClass('in');
if($(this).data('id') === 'show-all') {
$("#photos a[data-filter='"+ set +"']").addClass('out hidden');
$('#photos a').addClass('in');
$('#photos a').removeClass('hidden out');
}
$('#photos a').animate({
'left': '0',
'top':' 0'
});
});
的CSS
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 705ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 705ms;
}
.fade.out {
z-index: 0;
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
opacity:0;
}
.fade.in {
opacity: 1;
z-index: 10;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
CSS 由此stackoverflow帖子提供 。 現在了解如何預加載一些圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.