JQuery выполнить Fade Transition при нажатии? - PullRequest
0 голосов
/ 09 марта 2011

Я скачал плагин jQuery fade transition из Интернета. Я хочу, чтобы это делало переход по клику, но я не знаю, как изменить. Пожалуйста, помогите.

в коде заголовка HTML:

<script type="text/javascript">
      (function($) {
        function init() {
          $("#transitionEffect").fadeTransition({pauseTime: 4000,
                                                 transitionTime: 1000,
                                                 ignore: "#introslide",
                                                 delayStart: 4000,
                                                 manualNavigation: true,
                                                 pauseOnMouseOver: false,
                                                 createNavButtons: false});
        }

        $(document).ready(init);
      })(jQuery);
</script>

в js / fade-plugin.js

(function ($) {
  $.fn.fadeTransition = function(options) {
    var transitionObject,
        options = $.extend({pauseTime: 5000,
                            transitionTime: 2000,
                            ignore: null,
                            delayStart: 0,
                            pauseOnMouseOver: false,
                            manualNavigation: false,
                            createNavButtons: false}, options);

    function fader(obj) {
      var timer = null,
          current = 0;
          els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);

      function setup() {
        $(obj).css("position", "relative");
        els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");



        if (options.delayStart > 0) {
          setTimeout(showFirst, options.delayStart);
        }
        else {
          showFirst();
        }
      }

      setup();



      function manualNav(e) {
        var item;
        e = e || window.event;
        $(e.target).blur();
        item = $('.fadenav a', obj).index(e.target);
        if (timer) {
          clearTimeout(timer);
        }
        transition(item);
        return false;
      }

      function pause() {
        if (timer)
          clearTimeout(timer);
      }



      function showFirst() {
        if (options.ignore) {
          $(options.ignore, obj).fadeOut(options.transitionTime);
          $(els[current]).fadeIn(options.transitionTime, cue);
        }
        else {
          $(els[current]).css("display", "block");
        }

      }

      function transition(next) {
        $(els[current]).fadeOut(options.transitionTime);
        $(els[next]).fadeIn(options.transitionTime);
        current = next;
        cue();
      }

      function cue() {
        if ($("> *", obj).length < 2) {
          return false;
        }

        if (timer) {
          clearTimeout(timer);
        }

      }
    }

    return this.each(function() {
      new fader(this);
    });
  }

})(jQuery);

1 Ответ

1 голос
/ 09 марта 2011

Вам необходимо привязать вызов функции к событию.Если transtionEffect является элементом, для которого вы хотите вызвать fadeTransition:

  $("#transitionEffect").click(function() {
                   $(this).fadeTransition({pauseTime: 4000,
                                           transitionTime: 1000,
                                           ignore: "#introslide",
                                           delayStart: 4000,
                                           manualNavigation: true,
                                           pauseOnMouseOver: false,
                                           createNavButtons: false});
                       });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...