logo标签列表

使用jQuery实现淡入/淡出的动画效果

javascriptjqueryanimationfadeinfadeout
6
要理解我的代码，请访问此页面：

请先点击包装过滤器

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

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

每个红色框可能有一个以上的类作为过滤器的标识符。我的目标是实现一种漂亮的淡入淡出动画方式。目前我只能做到淡入。

尽管我已经编写了淡出动画，但我无法在JS代码中正确使用它。

1个过滤器的示例： 我想让除“packaging”外的所有类都漂亮地淡出，并使“packaging”类淡入。

jQuery 代码：

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

如何改进这段代码？

尝试像这样排列淡出效果：$（".all"）.fadeOut（function（）{$（".logo"）.fadeIn（）。addClass（'animated fadeInDown'）; } ）; 您也可以为其提供__延迟时间__，以使它不那么快... - DIEGO CARRASCAL
@DIEGOCARRASCAL 在你的例子中，我不能使用fadeInUp，因为它是我需要用于淡出时相反的动画。我需要一个用于淡出的盒子动画和一个用于淡入的盒子动画。我已经有了淡入动画。 - justme
以下是有关编程的内容，请将其从英语翻译成中文。只返回已翻译的文本：（请记住，我更改了类名） - justme
3个回答
3
我已经更新了您的示例。链接为：http://codepen.io/jammer99/pen/mEQabN。实际上，您需要强制将淡出效果在0秒内完成，并且由于您已经使用CSS生成了动画，因此应该使用 hide() 和 show() 代替 fadeOut() 和 fadeIn()。这是更新后的代码。
  $(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)
      });
    });

编辑：这是更新后的代码。 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")
    setTimeout(function() {
      $(".all").hide(0)
      $(".logo").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

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

  $(".filter-packaging").click(function(e) {
    e.preventDefault();
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").hide(0)
      $(".packaging").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });

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

  $(".filter-all").click(function(e) {
    e.preventDefault();

    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect")
    setTimeout(function() {
      $(".all").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect');
    }, 500);
  });
});
感谢您的输入。就视觉效果而言，仍然与我之前的差不多，最重要的是“淡出”动画效果没有正确显示，就像根本没有效果一样，而实际上应该是类似于反向淡入动画的效果。 - justme
我已经授予您50分。现在看起来非常好。谢谢。 - justme
很高兴能帮上忙 :) - Rohit Agre
1
针对您的一个筛选器示例，您说您希望“包装”是唯一不会淡出的，但是然后让“包装”淡入，即使它没有淡出？我假设您想要所有内容都淡出，然后再让“包装”淡入。您可以在调用.all的fadeOut时，在回调函数中调用“包装”的fadeIn。
编辑：
因此，fadeOut函数需要完成回调函数（即在fadeOut动画完成后运行的函数）。您只需要传递一个匿名函数给fadeOut参数，并在该函数内执行您想要在动画完成后执行的操作即可。
$(".filter-packaging").click(function(){
    $(".all").fadeOut(function() {
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });
});
你能给我一个例子吗？因为我无法同时使用这两个动画。 - justme
这很有帮助，但我不明白如何先运行淡出效果，然后再运行淡出效果，然后再运行淡入效果等等。问题在于，如果我为淡出添加一个类，则即使我为淡入添加一个新类，它也会保留。 - justme
0

基本上你的 CSS 和 JS 动画冲突了。你应该选择其中一种。而且两个 JS 动画同时运行，即 fadeIn 和 fadeOut。

一个解决办法是等待 fadeOut 动画结束后再开始 fadeIn 动画。你可以用超时来实现这个功能。

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

作为奖励，你还可以循环遍历你的筛选器和列表元素，而不是在示例中重复使用 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>

感谢您的输入，但更多或更少我所拥有的（没有动画）与您提出的完全相同（我的意思是结果）。问题在于我不喜欢只有一个淡入淡出的动画，这就是为什么我为此编写了CSS。我想将淡入淡出的动画合并到JS中。 - justme
我成功地为淡入添加了动画效果（动画效果并不是淡入本身，而是附加在其上的CSS）。我的计划是为淡出也做得很好，而不是从代码中删除它们。 - justme
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接