https://www.sellersprite.com/assets-frontend/js/components/hs.show-animation.js

1/**
2 * Show Animation wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 *
7 */
8;(function ($) {
9  'use strict';
10  $.HSCore.components.HSShowAnimation = {
11    /**
12     *
13     *
14     * @var Object _baseConfig
15     */
16    _baseConfig: {
17      afterShow: function() {}
18    },
19
20    /**
21     *
22     *
23     * @var jQuery pageCollection
24     */
25    pageCollection: $(),
26
27    /**
28     * Initialization of Show Animation wrapper.
29     *
30     * @param String selector (optional)
31     * @param Object config (optional)
32     *
33     * @return jQuery pageCollection - collection of initialized items.
34     */
35
36    init: function (selector, config) {
37      this.collection = selector && $(selector).length ? $(selector) : $();
38      if (!$(selector).length) return;
39
40      this.config = config && $.isPlainObject(config) ?
41        $.extend({}, this._baseConfig, config) : this._baseConfig;
42
43      this.config.itemSelector = selector;
44
45      this.initShowEffect();
46
47      return this.pageCollection;
48    },
49
50    initShowEffect: function () {
51      //Variables
52      var $self = this,
53        config = $self.config,
54        collection = $self.pageCollection;
55
56      //Actions
57      this.collection.each(function (i, el) {
58        //Variables
59        var $this = $(el),
60          linkGroup = $this.data('link-group'),
61          $target = $($this.data('target')),
62          targetGroup = $target.data('target-group'),
63          animateIn = $this.data('animation-in');
64
65        $this.on('click', function(e) {
66          e.preventDefault();
67
68          if($(this).hasClass('active')) return;
69
70          $('[data-link-group="'+linkGroup+'"]').removeClass('active');
71          $this.addClass('active');
72
73          if(animateIn) {
74            $self.addAnimation($target, targetGroup, animateIn, config);
75          } else {
76            $self.hideShow($target, targetGroup, config);
77          }
78        });
79
80        // Actions
81        collection = collection.add($this);
82      });
83    },
84
85    hideShow: function (target, targetgroup, config) {
86      $('[data-target-group="' + targetgroup + '"]')
87        .hide().css('opacity', 0);
88
89      target.show().css('opacity', 1);
90
91      config.afterShow();
92    },
93
94    addAnimation: function (target, targetgroup, animatein, config) {
95      $('[data-target-group="' + targetgroup + '"]')
96        .hide()
97        .css('opacity', 0)
98        .removeClass('animated ' + animatein);
99
100      target.show();
101
102      config.afterShow();
103
104      setTimeout(function () {
105        target
106          .css('opacity', 1)
107          .addClass('animated ' + animatein);
108      }, 50);
109    }
110  };
111})(jQuery);