如何平滑 jQuery 过滤系统的动画答案

【问题标题】：How to Smooth out an Animation for jQuery Filter System如何平滑 jQuery 过滤系统的动画
【发布时间】：2014-03-15 00:35:33
【问题描述】：

所以我一直在研究一个过滤器系统，它允许我使用 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>

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');
      }
    });
});

这是上述代码的link to a live example。如果您能帮助我平滑动画，将不胜感激。就数据的设置方式而言，这似乎是最好的方法，因为所有图像都被列为私有图像，因此它们仅在网站上可用。任何帮助或方向都非常感谢，只是在此静止不动。如果您对此有任何疑问，那么我很乐意相应地更新我的问题。非常感谢您提前提供的帮助！

【问题讨论】：

即使图像最初是在第一页加载时加载的？ a 标签实际上并没有链接到任何地方，因此页面不会刷新。 onclick="return false" 负责这一点。 javascript只是让它淡入淡出，这很流畅。问题是当它向左移动时它根本不顺畅，我不确定要采取适当的步骤。 编辑：所有图片都使用 flickr api 托管在场外。
当您单击应用程序时，我正在尝试获得类似于流沙的动画。元素将平滑地向左过渡，而不是向左猛烈过渡。现在我的正在向左摇晃。我认为向左移动的元素是数组中具有该类别的第一个元素。只是不确定如何在单击不同类别时平滑地获得动画。 razorjack.net/quicksand 我也试过 fadeTo()，但似乎根本没有帮助。

标签： javascript jquery css animation phpflickr

【解决方案1】：

找出下面更平滑的图像动画代码

Javascript

    $( '#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 由 this stackoverflow post 提供。现在来弄清楚如何预加载一些图像。

【讨论】：