Javascript 如何为jQuery过滤系统平滑动画
所以我一直在开发一个过滤系统,它允许我使用phpflicker作为CodeIgniter中的库来显示FlickrAPI中的数据。我目前有它工作良好,是完全功能,虽然动画不是我想要的地方。我遇到的问题是,当我将内容切换到一组不同的图像时,它会突然进入到位,并且没有平滑的动画。我不确定最好的方法是什么来处理这个动画,因为我对动画制作非常陌生。此外,如果有方法,我可以清理代码,这将是伟大的。这是我的密码 控制器Javascript 如何为jQuery过滤系统平滑动画,javascript,jquery,css,animation,phpflickr,Javascript,Jquery,Css,Animation,Phpflickr,所以我一直在开发一个过滤系统,它允许我使用phpflicker作为CodeIgniter中的库来显示FlickrAPI中的数据。我目前有它工作良好,是完全功能,虽然动画不是我想要的地方。我遇到的问题是,当我将内容切换到一组不同的图像时,它会突然进入到位,并且没有平滑的动画。我不确定最好的方法是什么来处理这个动画,因为我对动画制作非常陌生。此外,如果有方法,我可以清理代码,这将是伟大的。这是我的密码 控制器 $sets = $this->phpflickr->photosets
$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>
下面是上面代码的一部分。如果你能帮助我平滑的动画,将非常感谢。就如何设置数据而言,这似乎是最好的方法,因为所有图像都列为私有,因此只能在网站上使用。任何帮助或指导都是非常感谢的,只是在这个问题上停滞不前。如果您对此有任何疑问,那么我非常乐意相应地更新我的问题。提前谢谢你的帮助 找到了下面更平滑的图像动画代码 Javascript
$(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');
}
});
});
$( '#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是由客户提供的。现在了解如何预加载一些图像。即使图像最初是在第一页加载时加载的?a标签实际上没有链接到任何地方,因此页面不会刷新。
onclick=“return false”
会处理这个问题。javascript只是让它淡入淡出,这很平滑。问题是当它向左移动时,它一点也不平稳,我不确定应该采取什么适当的步骤。编辑:这些图像都是使用flickr api在非现场托管的。我试图在你点击应用程序时得到一个类似于quicksand的动画。该元素将平滑地过渡到左侧,而不是突然向左移动。现在我的正在往左边猛拉。我认为向左移动的元素是该类别数组中的第一个元素。只是不知道在单击其他类别时如何使动画平滑。我还尝试了fadeTo()
,但似乎毫无帮助。