Question

要了解我的代码，请访问此页面：

请先点击包装过滤器

http://codepen.io/mariomez/pen/qNrzAr?editors=0010

这是一种简化的动画过滤方法。

每个红色框可能有多个类作为过滤器的标识符。我对这段代码的目标是为淡入和淡出实现一个很好的动画方式。现在我设法做到这一点只是为了淡入。

即使我为淡出编写动画，我也无法在JS代码中正确使用它。

1个过滤器的示例：我希望除“打包”之外的所有类都能很好地淡出并使包装类淡入。

jQuery CODE

    $(document).ready(function(){
    $(".filter-logo").click(function(){
        $(".all").fadeOut(normal,addClass('animated fadeOutEffect'));
        $(".logo").fadeIn(normal,addClass('animated fadeInEffect'));
    });
    $(".filter-website").click(function(){
        $(".all").fadeOut();
        $(".website").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-packaging").click(function(){
        $(".all").fadeOut();
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-forsale").click(function(){
        $(".all").fadeOut();
        $(".forsale").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-all").click(function(){
        $(".all").fadeOut();
        $(".logo, .website, .packaging, .forsale, .all").fadeIn().addClass('animated fadeInEffect');
    });
});

尝试使用淡入动画:(失败）

$(".all").not('.packaging').fadeOut().addClass('animated  fadeOutEffect');
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

如何改进此代码？

Answer 1

我已更新您的示例。 http://codepen.io/jammer99/pen/mEQabN 基本上你需要设置fadeout强制在0秒内完成，另外因为你已经使用css来生成动画，你应该使用hide()和show()而不是fadeOut()和{{1 }}

这是更新后的代码

fadeIn()

编辑：这是更新后的代码。 http://codepen.io/jammer99/pen/mEQabN?editors=0010

  $(document).ready(function() {
      $(".all").each(function() {
        $(this).addClass("animated")
      })
      $(".filter-logo").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".logo").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      $(".filter-website").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0)
        $(".website").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      // UPDATE CODE - START ////////////
      $(".filter-packaging").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".packaging").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');

      });
      // UPDATE CODE - END ////////////

      $(".filter-forsale").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0);
        $(".forsale").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
      });

      $(".filter-all").click(function(e) {
        e.preventDefault();
        $(".all").removeClass('fadeOutEffect').addClass("fadeInEffect").show(0)
      });
    });

Answer 2

对于1个过滤器的示例，您要说的是＆＃34;打包＆＃34;是唯一一个不淡出的人，但随后又有了＃34;包装＆＃34;即使它没有消失，也会淡入淡出？

我会假设你希望一切都淡出，然后包装＆＃34;淡入。你可以通过拨打fadeIn来打包＆＃34;打包＆＃34;在fadeOut .all。

的回调中

编辑：

因此fadeOut函数采用完成回调，这是一个在fadeOut动画完成后运行的函数。您只需要将一个匿名函数传递给fadeOut参数，并在该函数内执行动画完成后您想要执行的操作：

$(".filter-packaging").click(function(){
    $(".all").fadeOut(function() {
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });
});

Answer 3

基本上你的css和js动画是冲突的。你应该坚持一个或另一个。此外，两个js动画同时在fadeOut和fadeOut运行。

选项是等到fadeIn动画结束后再开始hideThenShow动画。你可以暂停。

在下面的示例中，函数fadeOut等待fadeIn动画（500毫秒）然后在所选元素上运行hideThenShow。

作为奖励，您可以遍历过滤器和列表元素，而不是重复示例中的function hideThenShow($clickedElement, $elementsToShow){ var duration = 500; $clickedElement.click(function(){ $('.all').fadeOut(duration); setTimeout(function(){ $elementsToShow.fadeIn(); },duration); }); } $(document).ready(function(){ var filterLogo = $(".filter-logo"); var filterWebsite = $(".filter-website"); var filterPackaging = $('.filter-packaging'); var filterForsale = $('.filter-forsale'); var filterAll = $(".filter-all"); var websiteElemetns = $('.website'); var logoElements = $(".logo"); var packagingElements = $('.packaging'); var forsaleElements = $('.forsale'); var allElements = $(".all"); hideThenShow(filterLogo, logoElements); hideThenShow(filterWebsite, websiteElemetns); hideThenShow(filterPackaging, packagingElements); hideThenShow(filterForsale, forsaleElements); hideThenShow(filterAll, allElements); });函数。

希望有所帮助

.ullist li {width:100px;background:#f00; height:100px; display:block; float:left;clear:none; margin:25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="secmenu">
	<ul>
        <a href="#" class="filter-all"><li>All</li></a>
        <a href="#" class="filter-logo"><li>Logo</li></a>
        <a href="#" class="filter-website"><li>Website</li></a>
        <a href="#" class="filter-packaging"><li>Packaging</li></a>
        <a href="#" class="filter-forsale"><li>For sale</li></a>
</ul>
</div>


  <ul class="ullist">
<li class="website all">text</li>
<li class="website all">text</li>
<li class="website all">text</li>
<li class="packaging all">text</li>
<li class="packaging all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="logo all">text</li>
<li class="forsale all">text</li>
    
</ul>

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.selectedOption = '1';
    $scope.adapters = ['25.91.79.201', '192.168.0.14']
  }
})();

使用jQuery对fadein / fadeout的动画效果

3 个答案: