在 JS 上用动画或延迟交换图像

Question

我喜欢fiddle：http://jsfiddle.net/17g6q8k0/2/

    <img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png"
src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

和JS部分

        var sourceSwap = function () {
            var $this = $(this);
            var newSource = $this.data('alt-src');
            $this.data('alt-src', $this.attr('src'));
            $this.attr('src', newSource);
        }

        $(function() {
            $('img[data-alt-src]').each(function() { 
                new Image().src = $(this).data('alt-src'); 
            }).hover(sourceSwap, sourceSwap); 
        });

当您在图像上移动鼠标时，它正在发生变化。当您移除鼠标时 - 它会变回原来的样子。

在当前示例中，它会瞬间改变。

如何添加暂停或动画（动画效果更好）？

此图片大小相同。但我会将它用于具有不同大小的图像（如鼠标悬停时的 [f] 和 [facebook] 按钮），并使其更容易看。

Answer 1

我稍微更新了你的脚本http://jsfiddle.net/17g6q8k0/182/

无论如何您都需要使用 css。第一个选项是创建带有背景的 div 并为其设置动画。

不过，如果您想使用，还有另一种方法。您必须创建包含 2 个图像的容器。

<div class="hover-image">
  <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png"/>  
  <img class="hover" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png"/>
</div>

其中一个必须绝对定位并覆盖第一张图片。

.hover-image .hover {
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
}

您可以为这两张图片设置不透明度动画。

$this.find("img").each(function(){
  if($(this).hasClass("hover")) {
    $(this).animate({
      'opacity': 1
    }, "slow");
  } else {
    $(this).animate({
      'opacity': 0
    }, "slow")
  }
});

Answer 2

我知道你想做什么，但不要。图像替换是 10-15 年前的技术。如果您想将复选标记动画化为取消符号，最好的方法是变形 SVG 对象。有一个完整的图书馆可以为你做这件事： http://www.transformicons.com/

他们甚至有一个支票 > 取消标志对象。一个对象的代码如下所示...

HTML:

<button type="button" class="tcon tcon-remove tcon-remove--check" aria-label="remove item">
  <span class="tcon-visuallyhidden">remove item</span>
</button>

CSS:

.tcon {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  transition: 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 40px;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent; }
  .tcon > * {
    display: block; }
  .tcon:hover,
  .tcon:focus {
    outline: none; }
  .tcon::-moz-focus-inner {
    border: 0; }

.tcon-remove {
  height: 40px;
  position: relative;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  width: 40px; }
  .tcon-remove::before,
  .tcon-remove::after {
    content: "";
    display: block;
    border-radius: 2px;
    width: 85%;
    height: 25%;
    position: absolute;
    top: 37%;
    left: 8%;
    transition: 0.3s;
    background: black; }
  .tcon-remove::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .tcon-remove::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.tcon-remove--check.tcon-transform::before {
  -webkit-transform: rotate(-135deg) translate(5%, -10%);
  transform: rotate(-135deg) translate(5%, -10%);
  top: 50%;
  width: 55%; }

.tcon-remove--check.tcon-transform::after {
  -webkit-transform: rotate(-45deg) translate(20%, 10%);
  transform: rotate(-45deg) translate(20%, 10%);
  top: 50%;
  width: 85%; }

.tcon-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .tcon-visuallyhidden:active,
  .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

JS:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD module
    define(factory);
  } else if (typeof exports === 'object') {
    // CommonJS-like environment (i.e. Node)
    module.exports = factory();
  } else {
    // Browser global
    root.transformicons = factory();
  }
}(this || window, function () {

  // ####################
  // MODULE TRANSFORMICON
  // ####################
  'use strict';

  var
    tcon = {}, // static class
    _transformClass = 'tcon-transform',

    // const
    DEFAULT_EVENTS = {
      transform : ['click'],
      revert : ['click']
    };

  // ##############
  // private methods
  // ##############

  /**
  * Normalize a selector string, a single DOM element or an array of elements into an array of DOM elements.
  * @private
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements
  * @returns {array} Array of DOM elements
  */
  var getElementList = function (elements) {
    if (typeof elements === 'string') {
      return Array.prototype.slice.call(document.querySelectorAll(elements));
    } else if (typeof elements === 'undefined' || elements instanceof Array) {
      return elements;
    } else {
      return [elements];
    }
  };

  /**
  * Normalize a string with eventnames separated by spaces or an array of eventnames into an array of eventnames.
  * @private
  *
  * @param {(string|array)} elements - String with eventnames separated by spaces or array of eventnames
  * @returns {array} Array of eventnames
  */
  var getEventList = function (events) {
    if (typeof events === 'string') {
      return events.toLowerCase().split(' ');
    } else {
      return events;
    }
  };

  /**
  * Attach or remove transformicon events to one or more elements.
  * @private
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
  * @param {object} [events] - An Object containing one or more special event definitions
  * @param {boolean} [remove=false] - Defines wether the listeners should be added (default) or removed.
  */
  var setListeners = function (elements, events, remove) {
    var
      method = (remove ? 'remove' : 'add') + 'EventListener',
      elementList = getElementList(elements),
      currentElement = elementList.length,
      eventLists = {};

    // get events or use defaults
    for (var prop in DEFAULT_EVENTS) {
      eventLists[prop] = (events && events[prop]) ? getEventList(events[prop]) : DEFAULT_EVENTS[prop];
    }

    // add or remove all events for all occasions to all elements
    while(currentElement--) {
      for (var occasion in eventLists) {
        var currentEvent = eventLists[occasion].length;
        while(currentEvent--) {
          elementList[currentElement][method](eventLists[occasion][currentEvent], handleEvent);
        }
      }
    }
  };

  /**
  * Event handler for transform events.
  * @private
  *
  * @param {object} event - event object
  */
  var handleEvent = function (event) {
    tcon.toggle(event.currentTarget);
  };

  // ##############
  // public methods
  // ##############

  /**
  * Add transformicon behavior to one or more elements.
  * @public
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
  * @param {object} [events] - An Object containing one or more special event definitions
  * @param {(string|array)} [events.transform] - One or more events that trigger the transform. Can be an Array or string with events seperated by space.
  * @param {(string|array)} [events.revert] - One or more events that trigger the reversion. Can be an Array or string with events seperated by space.
  * @returns {transformicon} transformicon instance for chaining
  */
  tcon.add = function (elements, events) {
    setListeners(elements, events);
    return tcon;
  };

  /**
  * Remove transformicon behavior from one or more elements.
  * @public
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
  * @param {object} [events] - An Object containing one or more special event definitions
  * @param {(string|array)} [events.transform] - One or more events that trigger the transform. Can be an Array or string with events seperated by space.
  * @param {(string|array)} [events.revert] - One or more events that trigger the reversion. Can be an Array or string with events seperated by space.
  * @returns {transformicon} transformicon instance for chaining
  */
  tcon.remove = function (elements, events) {
    setListeners(elements, events, true);
    return tcon;
  };

  /**
  * Put one or more elements in the transformed state.
  * @public
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be transformed
  * @returns {transformicon} transformicon instance for chaining
  */
  tcon.transform = function (elements) {
    getElementList(elements).forEach(function(element) {
      element.classList.add(_transformClass);
    });
    return tcon;
  };

  /**
  * Revert one or more elements to the original state.
  * @public
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be reverted
  * @returns {transformicon} transformicon instance for chaining
  */
  tcon.revert = function (elements) {
    getElementList(elements).forEach(function(element) {
      element.classList.remove(_transformClass);
    });
    return tcon;
  };

  /**
  * Toggles one or more elements between transformed and original state.
  * @public
  *
  * @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
  * @returns {transformicon} transformicon instance for chaining
  */
  tcon.toggle = function (elements) {
    getElementList(elements).forEach(function(element) {
      tcon[element.classList.contains(_transformClass) ? 'revert' : 'transform'](element);
    });
    return tcon;
  };

  return tcon;
}));

在 JS 上用动画或延迟交换图像

Swap images with animation or delay on JS

css

jquery

settimeout

jquery-animate