问题： FadeIn vs FadeTo（更喜欢）？

Question

我的网站使用Google地图。完全加载后，应显示地图本身。这是fadeIn（）开始将不透明度从0增加到100％的地方。

由于某种原因，fadeIn（）不做任何事情，而fadeTo（）对我有用。我之前使用过fadeIn，但从未见过它的行为方式 - 也许我长时间盯着文档。

var map = new google.maps.Map(document.getElementById('map'),
{
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
});

google.maps.event.addListenerOnce(map, 'idle', div_fadein);
// Don't invoke callback on *every* map move

function div_fadein()
{
    $("#map").fadeTo(600, 1);               // <-- Works
    //$("#map").fadeIn(800);                // <-- Doesn't work
}

#map
{
    height: 350px;
    width: 500px;
    border: 1px solid black;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Answer 1

看起来fadeIn工作它依赖于display none来设置。所以因为动画后的最终结果不是opacity = 1;你的div仍然不可行。

在使用fadeIn动画结束时，显示设置为阻止，这将正确显示您的div。你有什么理由不能使用fadeTo吗？

Answer 2

区别在于这两个函数如何处理div元素的显示属性。

FadeTo：首先显示元素，然后显示动画

return this.filter( isHiddenWithinTree ).css( "opacity", 0 ).show()
        // Animate to the value specified
        .end().animate( { opacity: to }, speed, easing, callback );

FadeIn：显示元素和动画

jQuery.fn[ name ] = function( speed, easing, callback ) {
    return this.animate( props, speed, easing, callback );
};

来源：https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js

Google地图应该以可见元素显示，否则会显示意外行为，这就是FadeIn的情况。

Answer 3

问题： FadeIn vs FadeTo（更喜欢）？

MY答案：都没有！

来吧:) 你只想淡出一个元素; 它是2017年！
多年来，我们不再需要用js完成那些非常简单的任务。当然，在某些情况下，您应该使用js（-frameworks，-libraries，-platforms），但前提是它是关于具有复杂序列和/或广泛用户交互功能的细粒度设置。如果您遇到这样的情况：不要将jQuery用于动画部分！对于复杂的动画内容，您可以使用GSAP（喜欢它并大量使用它），Velocity.js或任何专为动画设计的内容。

jQuery很棒（例如Deffered / Promise和Ajax的东西，我也经常使用jQuery.type（））但它从来没有被设计成在动画中做一个至少非常好的工作（{{3 }}）。但回到主题：

你的问题是关于风格（keyword RAF） - CSS是关于风格的，
你的问题是关于改变状态（又称事件） - 只有这是js部分。

所以让我们重建（只是一个粗略的模型，请参阅下面的opacity或代码段）：

HTML |让状态下的标记

<!-- states are: transparent and opaque -->
<div id="map" class="state state--off"></div>
<!-- compare to <div id="map" class="state state--on"></div> -->

CSS |保持样式属于

/* the different states | please consider how reusable this is */
.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* WYSIWYG */
}
.state.state--on {
    opacity: 1; /* very clean and straight forward */
}

几乎就是这样。

JS |将一些逻辑放在一起以部署不同的状态

// BTW: no jQuery dependency and no styling at all as well
var domMap = document.getElementById('map'); // cache DOMelement
google.maps.event.addListenerOnce( // listen once!

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // toggle state in anonymous callback function
    domMap.className = 'state state--on';
  }

);

＆＃13;

var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    domMap.className = 'state state--on';
    /* the jQuery way: $(domMap).attr('class', '') or
     * $(domMap).toggleClass('state--on state--off')
     * the latter would be a good one for a generic no brainer toggle function
     * function toggleState( sSelector ) {
     *   return $(sSelector).toggleClass('state--on state--off');
     * }
     * and then one can call toggleState('#map')
     */
  }

);

＆＃13;

#map {
    border: 1px solid black;
    height: 350px;
    width: 500px;
}
.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* very clean and straight forward */
}
.state.state--on {
    opacity: 1; /* WYSIWYG */
}

＆＃13;

<div id="map" class="state state--off"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

＆＃13;

注释

状态的通用类名比特定类更好。为什么？想象一下，您想要将动画从淡入更改为向下滑动。如果你的类名是状态 - 透明和状态不透明 - 你会发现自己搜索和替换＆＃34;透明＆＃34;到＆＃34; up＆＃34;和＆＃34;不透明＆＃34;到＆＃34;向下＆＃34; （管他呢）。你必须在hmtl，css和js中搜索和替换。使用＆＃34; on＆＃34;和＆＃34;关＆＃34;你不必改变任何东西，除了去造型应该发生的地方（你的样式表），并重新定义什么意思＆＃34; on＆＃34; ＆安培; ＆＃34;关闭＆＃34;现在给你和你的用户。
advanced PEN。
如果您还没有，请查看Must-Read。

animates.css跨浏览器怎么样？

（93.59％）至少对于这个特别的人来说，忘记这一点。不支持的浏览器 css3 transition会给出imidiate响应而不是动画响应，这也很好。如果您想提供后备，您可以使用Can I use?检测其是否为nessecary，并提供js后备。如果你这样做：保持简单，也许会寻找一些（不是很多）强大的工具，你可以随着时间的推移处理。如果你想用jQuery动画，那么试试：
$('#map').animate({opacity: 1}, 2000)！像魅力一样 - 见下面的片段。

＆＃13;

var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $( domMap ).animate({ opacity: 1}, 2000 )
  }

);

＆＃13;

#map {
    border: 1px solid black;
    height: 350px;
    opacity: 0;
    width: 500px;
}

＆＃13;

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

＆＃13;

结论

不要浪费你的时间来弄清楚如何处理某些通用功能的实现。另外对我来说很难调试这个jQuery fadeIn --fadeTo实现！
所以下次只设计一个元素的状态。给它一个合适的类名，然后设计你的下一个状态，命名它。并通过js切换这些状态。这适用于很多用例！
首选的解决方案是elegenat，简单，易于理解和可维护。如果你发现自己是黑客，那就休息一下，然后尝试回归基础。

我的第一个答案|被接受的那个：）

＆＃13;

var $map = $("#map"); // cache element

google.maps.event.addListenerOnce( // listen once!

  new google.maps.Map(
    $map[0],
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $("#map")
      .css({display: 'none', opacity:1}) // this line is so hacky that it hurts
      .fadeIn(1800);
  }

);

＆＃13;

#map {
    height: 350px;
    width: 500px; 
    border: 1px solid black; 
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;    
}

＆＃13;

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

＆＃13;

FadeIn vs FadeTo

3 个答案:

问题： FadeIn vs FadeTo（更喜欢）？

MY答案：都没有！

HTML |让状态下的标记

CSS |保持样式属于

JS |将一些逻辑放在一起以部署不同的状态

注释

animates.css跨浏览器怎么样？

结论

我的第一个答案|被接受的那个：）